Help with chrome extension sending keyup events to unrelated inputs

jpaddle

When a user with the 1password extension clicks the login button on our site, it fires a keyup event on every input element on the page. This causes problems, because we have keyup listeners on several of them that should not be being fired.

---

1Password Version: Not Provided
Extension Version: 4.5.8.90
OS Version: any
Sync Type: Not Provided
Referrer: forum-search:keyup event

jxpx777

Hi, @jpaddle. Thanks for your post. It hasn't always been the case that we would hear from web developers about how 1Password could be a better citizen or how they could make their sites more functional with 1Password, so it's not something we take for granted. Seriously, thank you.

You're right that 1Password does trigger some key events at various times in its interaction with the page. The very short answer for this is that there are many sites whose fields change visibility or type when the user focuses them or when there is a key event. So, for instance, instead of using a placeholder attribute like <input type="password" placeholder="Password" /> the field will be coded as a text input that then has its type changed to password when the user first presses a key in the field, something like, <input type="text" value="Password" onfocus="this.value=\"\"" onkeyup="this.type=\"password\"" /> (Pardon the obtrusive JS. :smile:)

Do you have a link that you can share (in private via email if you like) to the site so we can better understand the problem and see if we can identify some strategy for making this not cause issues for your website?

--
Jamie Phelps
Code Wrangler @ AgileBits

jpaddle

Currently, the problem is visible here: https://checkout.paddle.com/pay/3445336-chre97ac9c229dd-392b3fbfe4

The precise error only happens if you lenter a password, when it triggers an attempt to submit the password recovery at the same time as the login, resulting in a strange error message. The easiest way to see it is just to attach an event listener - something like $('input').keyup(console.log), which will immediately show you that a whole pile of keyup events get triggered whenever the continue button is clicked with a password entered.

jxpx777

I'm not sure what could be going on here, but when I tried what you suggest, I only get dozens of errors from raven.js when I click on the Continue button until eventually all requests are rejected with response code 429. My log messages were never logged.

I also couldn't entirely discern the keyup handler for the forgotpass_email element. It's possible I missed it somewhere, but when I clicked through the Event Listener for it, it was just the keyup handler at the global level and from what I could see it was only checking for the escape key to cancel the checkout. Is this the one that is firing?

I do see that the check for the key is inside the wrapThis call, so that would get called every time a keyup event is fired. I'm not super familiar with Backbone, so perhaps this is a common pattern, but I would be more inclined to check the key code before doing any other processing. Something like this seems like it should work. I haven't tested it out, but perhaps it would point the way toward a workaround?

$('html').unbind('keyup').keyup(function(event) {
        if (event.keyCode == 27) {
            this.closeCheckout();
        }
}.bind(this));

I hope that helps. Let us know how you get on.