Disable for email inputs in my Angular app

podoglyph

Hello,

I have a feature where my users use a form to create new authors with a text field and an email field. I don't see any reason to have 1PX extension suggest filling the email field because the users aren't adding their own email addresses. They add them one after the other and displaying the 1PX button and menu on the email field is totally unnecessary. Is there a way to prevent this in my app?

---

1Password Version: Not Provided
Extension Version: 1.18
OS Version: OS X 10.15.3
Sync Type: Not Provided

kaitlyn

Hello @podoglyph! Would you mind providing me with the HTML for the email field on your app. I'd be happy to pass the info along to our development team.

As of right now, there isn't a way to make 1Password X not appear in a specific field from a developer perspective. That said, we've got one of our own developers working on 1Password X behaving more effectively in cases like this. It's always helpful to see more opportunities. :)

podoglyph

The form html is nothing special. Glad to hear someone on your team is thinking about it.
`

Create

`

ag_ana

@podoglyph:

Thank you for the update. Should you wish to share the HTML code with us, as per kaitlyn's request, we will be happy to pass it to our developers for inspection.

podoglyph

oops, thought I did the first time.

<form [formGroup]="authorForm" (ngSubmit)="onSubmit(authorForm, $event)" autocomplete="off">
      <input formControlName="firstName">
      <input required formControlName="lastName">
      <input type="email" formControlName="email">
      <button type="submit">
        Create
      </button>
</form>

kaitlyn

@podoglyph – Ah yeah, you're right. That isn't anything special. My guess is that the type="email" is making 1Password think it's a field you'd like filled. Just curious, when you add autocomplete="off" to the actual email field line, so it would read:

<input type="email" formControlName="email" autocomplete="off">

Does that make any difference for you?

ref: dev/core/core#756

podoglyph

@kaitlyn Adding autocomplete=off doesn't do anything. Removing type="email" also has no effect.

I dug a little deeper and found that the extension is looking at preceding sibling elements and checking their textContent for the word email. It doesn't matter if it's just the word email or garbagebeforeemailandafter. I was able to solve my issue by faking out the extension:

<label class="mat-small">Email</label>
<div>
    <span class="hide">fakelabel</span>
    <input required type="email" formControlName="email">
</div>

with css:

.hide {
    visibility: hidden;
    position: absolute;
}

The fakelabel element must have text or it'll get bypassed and then the extension will still find the real label above it. The real label also must be outside the input's parent.

kaitlyn

@podoglyph – Ah, super interesting. Thanks for taking the deep dive to figure that out! We do look for the word "email," but it's on our radar to dial that back a bit. That said, it's an endless challenge to distinguish an email field you do want filled from an email field that you don't want filled from a broad perspective. I'm glad that'll work for your own app, though. :)