Chrome opens suggest password dialog on input with type number on MacOS?

Issue

I'm running into an issue similar to this one.

I have autocomplete="off" on the entire form, and it does work correctly in Firefox, and most of the elements do work correctly in Chrome except for this one:

        <mat-form-field>
          <input matInput
          autocomplete="chrome-off"
            type="number"
            formControlName="leadTimeDays"
            placeholder="Lead time days">
        </mat-form-field>

I added autocomplete="chrome-off" to see if that might do the trick but it still populates the form dialog. I tried build a Stackblitz with the latest @angular/material but ran into this issue, so I can only provide a screenshot:

Any ideas on how to disable the password autofill?

Solution

I got really really frustrated by this. All of the various autocomplete off/false and various javascript answers didn't change this...

So I just changed the dang input box to a textarea, fixed the columns, set rows="1" and disabled the input from being adjusted...

I couldn't get any of these suggestions to work... so I just made my input a textarea, made cols="1" and disabled adjusting the space.

<textarea style="resize: none;" rows="1" cols="50" .... ></textarea>

No more suggestions from chrome...

Answered By - Wesley Stewart