Browser autofill options overlap angular material autocomplete options

Question

In angular material, material autocomplete is working fine, but the browser auto fill options are overlapping the material autocomplete popup. How to turn off autocomplete for a specific application without turning off browser auto-fill? Reference image attached.

https://www.pcworld.com/article/3145489/browsers/how-to-clear-unwanted-autofill-entries-in-google-chrome.html — Negi Rox, Nov 26 '18 at 07:27
@karoluS I tried this, but the latest updated browser are not looking for any parameters in autocomplete property. This is not working nowadays — BlueCloud, Nov 26 '18 at 07:33
@BlueCloud then i got to verify my production applications. I'm using `autocomplete="dont-fill-me-up"` and it prevent autocomplete. What browser are you using? — karoluS, Nov 26 '18 at 07:36

score 3 · Accepted Answer · answered Dec 04 '18 at 11:19

3

its also working

<input type="search" />

answered Dec 04 '18 at 11:19

BlueCloud

523
2
5
15

score 2 · Answer 2 · answered Nov 26 '18 at 07:32

If you want to prevent browser (especially chrome) autocomplete trigger on an input you'd have to override its default behaviour. Google doesn't respect autocomplete="off". From my experience thing that always worked was using this autocomplete="randomstring", but this is more of a workaround that a solution. You might find more ways to disable it here.

score 1 · Answer 3 · edited Jan 07 '20 at 14:04

1

I got the solution using jQuery.

$(document).ready(function(){
    $("#origin_postal").attr("autocomplete", "disabled");
});

edited Jan 07 '20 at 14:04

geisterfurz007

5,292
5
33
54

answered Nov 26 '18 at 08:41

BlueCloud

523
2
5
15

Change input type as search "" its also working – BlueCloud Dec 04 '18 at 11:14

Browser autofill options overlap angular material autocomplete options

3 Answers3

Linked