How to turn off chrome's autocomplete in p-dropdown?

UI Components for Angular
Post Reply
aflorin
Posts: 69
Joined: 13 Dec 2017, 19:01

28 May 2019, 22:21

Chrome ignores autocomplete="off" at the form level so in order to prevent chrome from displaying prefilled options from it's own list of autocomplete values (those cached at the client), I've been using autocomplete="false" in text boxes. This is a hack so that chrome doesn't use the client's cached list of values because "false" isn't a supported value for that attribute which blocks chrome from using it.

However, this hack doesn't work with the p-dropdown.

How can we turn off chrome's built in autocomplete for p-dropdowns?

User avatar
Ctrl-C
Posts: 97
Joined: 29 Sep 2016, 04:21

29 May 2019, 02:46

You should be able to create a directive to add this attribute.

aflorin
Posts: 69
Joined: 13 Dec 2017, 19:01

06 Jun 2019, 20:28

I don't know what you mean. The dropdown is rendered onto the DOM as an input control, a down arrow button and a list box. How do I inject an attribute into the rendered input control of p-dropdown?

Edit:

I figured it out. I was able to inject the attribute to the input element of the dropdown as follows:

HTML:
-----------
<p-dropdown #stateDropdown
editable="true"
[options]="states"
optionValue="value"
optionLabel="value"
formControlName="state">
</p-dropdown>

Component:
---------
@ViewChild(Dropdown) stateDropdown: Dropdown;

ngAfterViewInit() {
this.stateDropdown.renderer.setAttribute(
this.stateDropdown.editableInputViewChild.nativeElement,
"autocomplete",
"no");
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests