Developer issue - Angular Reactive Forms - Clash with 1Password

george43g

Hello,

I hope this is the correct forum in which to post this issue. Hopefully, there is a solution that the 1Password developers can implement to prevent this issue from happening again.

So this relates to websites built with Angular using Angular Reactive forms. When coding up a login form, one of the features commonly used is detecting when the inputs have been "touched". This allows us as developers to only show validation errors on inputs such as email and username after the user has finished typing in that input box, or switched focus to another DOM element.

This usually works OK, except upon some research I realised that a bug that I was experiencing was being caused by the 1Password Chrome extension.

For some reason, when the extension is active, it triggers the "onBlur" event on the input box almost immediately. I was able to compare two browser windows with the exact same environment, with the only difference that on one of those, 1Password was enabled and it was suggesting to autofill a password. In the 1Password window, as soon as the form control is in focus, it's already "dirty" and "touched", which triggers the error messages "email is invalid" to show immediately before the user has even had a chance to type anything. Im not sure how 1Password affects this, but it definitely causes the input element to behave as if it has already been used and lost focus, resulting in error messages showing instantly and affecting the user experience.
On the other hand, on the chrome window that didn't have 1Password, the input forms worked as expected. the control stays "untouched" until the user loses focus of the input, only after the user has finished typing and moved on will the form display any errors.
I was definitely able to isolate 1Password as the cause.

Could the developers here make some kind of change to prevent the chrome extension from unnecessarily triggering form events?

---

1Password Version: Not Provided
Extension Version: 1.14.2
OS Version: Not Provided
Sync Type: Not Provided

dalton

Hey @george43g! Thanks for reaching out to us about this and for providing such a thorough explanation of the issue you're experiencing.

Is your error state getting triggered as soon as you focus the input field with 1Password X enabled or when you switch focus from the input field to the inline menu? There are a couple of code paths there on our end so I'd like get some clarification on that point before digging deeper.

george43g

Hey! Thanks for the response - I only just saw it and will try my best to answer as best as possible.

So I also posted a bug report on the angular github repo here: https://github.com/angular/angular/issues/29520#event-2231377246
I include that as I provided a more in-depth technical description of the bug on that forum.

They closed the issue since their app is behaving correctly - I hope you'd agree that this is something we can fix on the 1Password end.

So just to clarify, the error state (as far as the user can see) is dependent on a few factors. For the form to show an error, the input must be both "touched" and "invalid".

Before the user has typed anything into an input, its state is "invalid" and "untouched" (touched = false).

Most developers only show an error when the input/form is both "touched" and "invalid". This prevents all of the input boxes showing and error before the user has had a chance to type anything.

With this logic, when a user focuses on an input, it should stay neutral. Only once the user moves away / is done typing (onBlur) should touched == true and set-off the error state (provided the input is also [&&] "invalid").

The bug happens that with 1Password, that error state is triggered immediately as soon as the user focuses on the input element, even before the user has started typing - and the reason for this is that somehow, touched == true as soon as you focus on the input element, whilst 1Password extension is running. It also injects some code into the input element to show the little 1Pass icon. I suspect it has something to do with this.

The expected behaviour is that "touched" should only eval to true after the user has blurred/focused a different element (so essentially finished typing in that input box).

I hope I've articulated this well, please let me know if you'd like any further clarification.

dankyung

Hi @george43g,

Thanks again for the detailed explanation of this issue!

We noticed the same behaviour with Angular Reactive Forms and we're working on getting that fixed as soon as possible.

For situations like this, it would be great for 1Password X to have a feature to disable the inline menu in certain websites. In the meantime, you can disable the inline menu completely in the settings page.

https://support.1password.com/getting-started-1password-x/#manage-settings

If you're unable to disable the inline menu to continue using 1Password X, you can alternatively fill your logins with the popup menu on websites using Angule Reactive Forms. By default you can open the popup menu by pressing Cmd+Shift+X (Ctrl+Shift+X) or pressing the 1Password icon in the top right corner on your browser.

Sorry for any inconvenience this may cause. Hopefully we can get this fixed soon!