Key combo to dismiss the autofill popup?

marshall_stacks

I've got the Show autofill menu on field focus option on, because it's generally very handy. It occasionally causes trouble on some poorly-designed websites.

If I try to buy a movie ticket on Cineplex.com (big Canadian movie theatre site with glitches and bad UX), they have an input box with a select box that toggles on focus. The autofill menu comes up on top, and then if I click outside to dismiss the autofill menu, it also closes the dropdown.

Before click: (notice no 1password icon shows in the field)

After click: (notice now a 1password icon is showing)

I can click through to the "suggestions" and find the "hide on this page," I guess, but it might be handy to be able to just hit the Escape key or something to just dismiss the one instance of the window rather than blacklisting the page or whatever the hide button does.

---

1Password Version: n/a
Extension Version: 2.0.5
OS Version: Firefox / Windows 10

ag_ana

Hi @marshall_stacks!

You should be able to dismiss the popup menu by pressing the Esc key. Can you please share a full URL to that form so we can test the same form and see if we can reproduce this?

marshall_stacks

Hey, @ag_ana ! You're right, but the UX is still a little tricky. In this case, escape closes the popup AND the dropdown element beneath it. It's not too big of a big deal on this particular Cineplex site: Clicking again opens the dropdown again but not the popup, interestingly. Maybe something like a "stopPropagation" on the keypress handler would make this a bit better: If the Esc key closed the 1password popup but then didn't also affect the underlying page.

If you want to try it yourself, just go to the Cineplex website and pretend you're going to buy tickets for something. For example:
https://www.cineplex.com/Movie/shangchi-and-the-legend-of-the-ten-rings?cmpid=NPCS_Home_Showtimes_ENG hit the "GET TICKETS" button near the top of the page. Then click the middle of the 3 dropdowns that says "Select theatre or city"

ag_yaron

Hey @marshall_stacks ,
Thanks for the additional info.

You can also dismiss 1Password more subtly by clicking the little 1Password icon on the right side of the field, which should only dismiss 1Password's inline menu without dismissing the website's selection dropdown.

Does that work better?

yulmathieu

When you dismiss with the escape key, it reappears as soon as you type something. Can it be made to not reappear until at least a page reload, or that I click the 1password icon?

ag_chantelle

@yulmathieu

If you've used the esc key, the inline menu will remain closed in that field until you click the 1Password icon. If you've selected another field, the behaviour would repeat itself.

If you don't want 1Password to automatically show when you select a field, you can change how it behaves in the browser altogether:

1. Right click the 1Password icon in your browser toolbar and choose Settings.
2. Under Autofill, disable "Show autofill menu on field focus".

This will, by default, hide the menu on any site unless you click the icon.

yulmathieu

My experience is that it keeps reappearing. It's not true of all web sites. It also seems to reappear if I hit the down-arrow to select an auto-complete that the browser or the web site is showing me.

ag_yaron

Hey @yulmathieu ,

If you press the little 1Password icon on the right corner of the field that would dismiss the suggestions menu without it re-appearing. However, pressing the Down arrow key will indeed respawn the suggestions menu as it is hardcoded to do so.

Only if you turn off the "Offer to fill and save passwords" option in the extension's settings page, the suggestions menu won't show up with the press of the Down arrow key.

yulmathieu

Well that's a problem, I hit escape (or the icon), the drop down disappears, I go about typing whatever I need to type, the website shows me it's own completions, hit down to select it, and the 1password thing reappears, out of the blue, covering the website's offerings.

Then fun starts when I hit escape to hide one password, and it hides also the website's own drop down. Sometimes, escape also tells the website to close a "popup" window, so I need to re-open the window to continue.

1password should only listen to the down arrow if its own autofill menu is showing. Otherwise, it's a surprise.

I would also make it so that one password remembers the field for the next time: if I turned off the autofill for a field on a site once, I probably don't want it the next time.

ag_yaron

Thanks for the input and feedback here @yulmathieu , much appreciated!

I think disabling the down arrow key that way will hurt a lot of users that rely on keyboard navigation more than mouse navigation. It is extremely helpful and fun to call 1Password using the down arrow key when you are in a field, but I can definitely see how it can collide with existing dropdowns of a website so I'll forward it to our developers, hopefully we can find some logical compromising solutions.

Thanks again :)

ref: dev/core/core#9974

yulmathieu

I use the keyboard a lot (hence escape key, not clicking the button), but I never knew down arrow could even be used like that. All I noticed is how it got in my way in the cases I explained above. I've had fights with 1password popping in a search box over and over again, the last place 1password should be in, while I'm trying to select the browser's autocompletion. The only I could do that is with the mouse.

That being said, I enjoy 1password showing up at first, so disabling that facility is not great.

ag_chantelle

@yulmathiew

You're absolutely right, 1Password should not be showing up in search fields. That is, as long as the field is coded correctly. Hopefully we can address the down arrow concerns in a future release. I do hope the suggestions we've offered are a reasonable solution in the interim.

If you have any questions or if there's anything we can do to help, please let me know! In the meantime, thank you for your support! :smile:

yulmathieu

Well, I did disable the "display autofill menu". Here's what happen in cPanel search box:

At first, I type a "J" and down to trigger the firefox auto-completion, it shows this, we can see the 1password under the browser's autocompletion:

Then I hit down arrow to select the second entry, Firefox's dropdown goes away and 1password takes over:

If I start over, the 1password drop down comes back.

I can use the mouse to click the 1password button, but that's annoying.

I can disable the "propose to fill and save", then the 1password button disappears from the field, and I need ctrl-dot to call 1password. I guess it's not that much of a loss since 1password didn't offer to save passwords nearly often enough (a separate issue).

marshall_stacks

You can also dismiss 1Password more subtly by clicking the little 1Password icon on the right side of the field, which should only dismiss 1Password's inline menu without dismissing the website's selection dropdown.

Does that work better?

Thanks @ag_yaron , I don't know why I hadn't tried that! Maybe if the icon changed in some way to suggest that it would now collapse/close the popup, that would help with discoverability? But I'll remember that in the future and I think it will help with this problem on edge case sites with weird UI components!

By the way, that's the behavior I was suggesting with the Esc key: the click event is handled by the 1password icon, and then it doesn't propagate to the actual page.

ag_yaron

Thanks for the additional info and example here.

If you guys encounter webpages where this issue is more prominent (and 1Password should not show up in the field at all), we'd like to improve things, so please send us the following to support+x@1password.com:

• The page's URL so we can access it and play with it ourselves.
• If the above is not possible, get the page's structure instead; Right-click the 1Password extension icon on the top right corner of your browser and select "Help" -> "Collect Page Structure" while on the page with the problematic field.
• A screenshot/video showing the problematic field and the unwanted behavior, alongside a short text description of the problem.

Thank you both :)