Allow disabling of browser autocomplete

[arun-maddheshia]

Please fill below information if issuing a bug report.

Expected behaviour

Set the autocomplete attribute of the input field to "off", or allow passing it as an optional attribute so the search would work better.

Actual behaviour

right now the search results has double dropdown. One by the browser autocomplete, and one by the ng-select. looks wierd.

More Info

ng-select version: latest

browser: Chrome
reproducible in demo page: Yes

[varnastadeus]

@arun-maddheshia I think it should be disabled by default. Will fix it.

[arun-maddheshia]

@varnastadeus thanx 👍 when it get it release :)

[varnastadeus]

@arun-maddheshia later today

[arun-maddheshia]

@varnastadeus autocomplete off is not working in chrome :(

[varnastadeus]

As it seems chrome ignores autocomplete off, but if you provide any semantic value then it will work. Not sure about other browsers though

[arun-maddheshia]

@varnastadeus so what workaround to do with ng select because if user autofills the search field its get broken. User unable to select the ng-select dropdown values.

[dan-andreoli]

@varnastadeus with the last chrome update (v64.x) the workaround not working anymore, but I've noticed that the autocomplete doesn't break the select, but it only hide the selected value. Here a simple solution: ass to the css class .ng-select { z-index: -1; } and this solves the hiding problem.

[arun-maddheshia]

@varnastadeus any update on it, the issue is still exist.
@dan-andreoli .ng-select { z-index: -1; } is not solved the problem.

[varnastadeus]

@arun-maddheshia please provide reproducible plnkr, I tried to reproduce it with no luck.

[arun-maddheshia]

@varnastadeus Just create a StackBlitz

[varnastadeus]

@arun-maddheshia thanks, will look at it

[pwarelis]

To disable (fool) the autofill you need to set the input name attribute to something that chrome has not seen before and has no history of. Try uuid.

[anjmao]

As 30201c0 is merged now we have newId function which can be used on input name.

[arun-maddheshia]

@anjmao can we fix it please :)

[anjmao]

@arun-maddheshia have you looked at https://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off? Setting <form autocomplete="off"> should solve this problem for you :)

[arun-maddheshia]

@anjmao I tried all these things but nothing works, only solution is #269 (comment) autocomplete="radomvalues". So if you make autocomplete="{{ dropdownId }}" it working fine I tested with it.

[dottodot]

The other option is to use

  <input #filterInput  *ngIf="searchable" type="search">

[varnastadeus]

@arun-maddheshia I have added id as autocomplete value.

[przemkow]

@varnastadeus, unfortunately, it does not solve the problem. Chrome autofill still pops up on my browser.

Chrome: Version 67.0.3396.87 (Official Build) (64-bit)
ng-select: 1.5.2

[unit147]

Chrome: Version 68.0.3440.106 (Official Build) (64-bit)
ng-select: 2.5.1 is not usable because of this bug :(

[DonJuwe]

@varnastadeus, if I change it to autocomplete="off" manually in Chrome Version 69.0.3497.100 (64-Bit) it works. Could you please change it?

[varnastadeus]

instead of saying it doesn't work, create reproducible example proving it

[vmanchev]

What I found for this bug and Chrome is that the labelForId is problematic.

• if labelForId is not used, the problem does not exists. You'll lose some usability though, as when you click on the form label, the ng-select control will not be focused.
• if labelForId is used with some common name (like "client" in my case), Chrome will do its best to provide browser autocomplete.
• if labelForId is used with unique value (e.g. "client123"), there will be no browser autocomplete

[DonJuwe]

As @vmanchev mentioned, labelForId seems to be the problem since it is being converted to a property id of the generated <input>. Here is a StackBlitz using the current version (2.11.1) where you can reproduce the issue when you have values stored in your browser for an <input> with property id="city" (if this does not work try using keywords like email or name).
This triggers the browser's autocomplete like here:

By manually changing autocomplete to off for the generated <input> Chrome's autocomplete will not be triggered.

[Lars-Wunderlich]

Urgently needed and helpful....

[smasala]

@DonJuwe workaround:

ngOnInit() {
      setTimeout( () => {
        document.querySelector('ng-select input[autocomplete]').setAttribute('autocomplete', 'off');
      });
}

[Xyaren]

@varnastadeus This should be reopened as the bug still exists, as prooven in the example provided by @DonJuwe

[varnastadeus]

Ok I have it reproducible so I will check it out. I will try to see if autocomple="off" works while labelForId is applied

[esoyke]

@smasala I used a similar approach but instead set the autocomplete value to something nonsensical ('foobar'), as it seems autocomplete=off was being ignored by Chrome now.

[bharatlagad]

@varnastadeus... Have you updated autocomplete = "off" on npm

[sarnecki-cic]

My workaround was to change input id in ngAfterViewInit() and adding timpestamp there:

ngAfterViewInit(): void {
        document.querySelector('input[data-name=ng-select]').id = 'newId-' + this.timestamp;
    }

[Ogunk]

@varnastadeus Hi, I'm still having this issue and tried everything here and other places but nothing is working.

Here is my code :

      <label for="ppp">Organization</label>
      <ng-select [hideSelected]="true" autocomplete="off" placeholder="Select an organization" labelForId="ppp"
        [closeOnSelect]="true" [searchable]="true" formControlName="organizationId">
        <ng-option *ngFor="let organization of availableOrganizations" [value]="organization.id">
          {{ organization.name }}
        </ng-option>
      </ng-select>

The weird thing is if I delete the "for" in the label and the "labelForId" it is working, or I if delete one of the two or if one is not matching the other.

Anyone have an idea of why is that ?

ng-select version : 4.0.4
Browser : Chrome

[huynv86]

it doesn't work, please fix this bug soon

[earshinov]

@huynv86 , it still works fine for us (ng-select 7.0.1). Which ng-select version are you using? Do you have a repro?

[jongomes]

< nz-select formControlName="gateway" nzShowSearch nzAllowClear nzPlaceHolder="pick the gateway" >

work me, nzPlaceHolder

"ng-zorro-antd": "^13.1.0",