1Password's browser extension seems to eat the Enter keypress event, which breaks Ember.js

lepolt
lepolt
Community Member
edited May 2015 in 1Password in the Browser

I have created a simple form so you can further see the issue:
http://emberjs.jsbin.com/pivumo/4/edit?html,js,output

I've also included an animation:
https://cloudup.com/cX_yqwgqn-6

If you enter a name and password, then press Enter, the 1Password browser extension pops up and asks if you want to save the login. The problem is that when this happens, it seems to break the Ember.js event handlers and my "submit" action is never called (see submit: function()... in the demo).

If you click the Submit button, it is in fact firing the event correctly and my form works. This is an issue on our login page, as well as some others within our application. We are using Ember.js version 1.10.x. I haven't tested other websites using other modern web frameworks.

I can consistently reproduce this using Safari, and sometimes using Chrome. I haven't tried any other browsers. I am using the following version:
1Password
Version 5.3 (530029)
Mac App Store

Comments

  • littlebobbytables
    littlebobbytables
    1Password Alumni

    Hi @lepolt,

    I've done a bit of testing on Safari, Firefox and Chrome for both our stable and beta extensions and with very few exceptions you're quite right, we're somehow interfering.

    I'm going to ask somebody from the dev team to take a peek and see how they wish to proceed.

  • lepolt
    lepolt
    Community Member

    Any updates on this issue?

  • littlebobbytables
    littlebobbytables
    1Password Alumni

    Hi @lepolt,

    I apologise that nobody has been in touch, it seems we got a bit side-tracked so sorry about that. I'm poking the devs again given I'm still no better equipped to supply an answer.

    As a web dev you might be able to help educate me. When I use the Web Inspector I notice the your password field has a submit event listener and the type is Bubbling. I looked at a couple of other sites and their type is Capturing. Could this be involved at all?

  • lepolt
    lepolt
    Community Member

    Thanks for your quick reply. I do not think that the event listener and type have anything to do with it.

    Our application relies on the keyUp event to be fired in order for the action/event to be handled correctly. We dug into your minified browser extension code a little bit and found out that you are responding to keyDown when user presses Enter (key code 13).

    What we think might be happening is this:

    • User presses Enter key
    • 1Password catches the keydown event
    • 1Password opens the "1Password Autosave" dialog
    • Dialog opens and gains focus BEFORE the keyUp event is fired on the original text field

    The timing of keydown, opening your dialog, and keyup would explain the differences and inconsistencies that we have seen between different browsers, and not being able to reproduce consistently on some (like Chrome).

  • jxpx777
    jxpx777
    1Password Alumni
    edited June 2015

    Hi, @lepolt! @littlebobbytables asked me to take a look at this issue. I'm very sorry it's taken me so long to get around to it.

    I think your analysis of the issue is spot on. I changed the code that sends the autosave message to 1Password mini to have a delay and it seems to solve the issue you're seeing. I will open a pull request for this right away and it should be in a new beta very soon. I can't make any promises on the timeline, but we try to ship betas within a few days when there are new changes.

    Thanks again for the report! If you ever need anything else, please don't hesitate to write again. We're always here to help.

This discussion has been closed.