Would be possible to trigger an onChange event when inputs are filled?

marcelloromanelli

Hi !
I'm a Frontend Architect working for tutti.ch. In the last months we started developing our website using React.

Everything works great except on thing: users are not able to login using their 1Password extension.

Steps to reproduce:
1. Go to https://www.tutti.ch/my/start
2. Register an account https://www.tutti.ch/my/start/register
3. Save your credentials when prompted by 1Password
4. Now go back to the login page and try to login
(else just watch the video https://www.dropbox.com/s/wxgnttdywfjn9g9/1Password_bug.mov?dl=0)

The issue I see is that the 1Password extension does not trigger any kind of event when the field is modified. On the other hand the username/password filling works perfectly when it's coming from the integrated password manager of Chrome.

Any help is very much appreciated.

Thanks and keep it up with such a great product!

Marcello

---

1Password Version: 1Password 6 Version 6.3.2 (632001) AgileBits Store
Extension Version: 4.6.0.4
OS Version: 10.11.5 Beta (15F31a)
Sync Type: Dropbox
Referrer: forum-search:javascript event

littlebobbytables

Hi @marcelloromanelli,

I haven't had a chance to register an account at the site you've kindly supplied a link to but I just wanted to comment on event triggering. When 1Password fills it triggers keyboard events (keydown, keypress & keyup) and then proceeds to dispatch onChange and onInput events too. We do this because to better mimic the person entering data and because unless we do some sites won't believe anything has happened. We're always ecstatic when web developers reach out to us though so we will work with you to figure out what is happening. I'm going to make sure the right people see this thread.

jxpx777

Hi, @marcelloromanelli. Thanks for your patience waiting while we looked into this. Like @littlebobbytables mentioned, we do simulate several Javascript events during filling, but it seems something is strange about the timing. I see set a breakpoint on the event handler in the site and found that the change event was fired on blur like it should be when I manually typed in the field and then pressed tab. But when filling with 1Password, the change event fires before the value is populated in the field at all, which is definitely not the correct behavior. At first I thought it was because we were firing our change event before our blur event, which is technically incorrect, but even after changing the order of the events, I had the same results. One other thing I notice is that our keyboard events are fired as non-cancelable, but changing that did not help either.

It's a little hard to trace everything through the various React components and the ways that the event listeners are being bound and bubbling and capturing events are being "trapped", so perhaps there's something I'm overlooking. From your end, are you able to discern any difference in the events' behavior between what 1Password is triggering and what your app is expecting? Also, do you see any different behavior between Safari or Chrome and Firefox? Firefox has a slightly different keyboard event creation process, so it would be interesting to know if there is a difference.

Thanks!

--
Jamie Phelps
Code Wrangler @ AgileBits

marcelloromanelli

Hi Jamie, thanks for looking into the issue. After some debugging I found out that the issue was on our side since we were not passing around events correctly. If you ever come to Zurich I owe you a beer ;-)

jxpx777

That's awesome, @marcelloromanelli! Thanks for the update. I've always wanted an excuse to go to Zurich. :chuffed: