Semantic-ui: [Dropdown] autocomplete="off" does not work for dropdowns anymore

[ipeterov]

How this affects me

I'm trying to create a country selection dropdown. I just copied it from the docs, and it almost works. The only issue is that chrome autofill overlaps with the options and users cannot select the country unless they click away from the field and click on it again (this causes autofill to not appear). This is because autocomplete="off" option doesn't work anymore in chrome.

Google's position

Google has confirmed that they now ignore the autocomplete="off" option here.

The reason for that is:

The tricky part here is that somewhere along the journey of the web autocomplete=off become a default for many form fields, without any real thought being given as to whether or not that was good for users. This doesn't mean there aren't very valid cases where you don't want the browser autofilling data (e.g. on CRM systems), but by and large, we see those as the minority cases. And as a result, we started ignoring autocomplete=off for Chrome Autofill data [1].

They provided another way to disable autocomplete:

In cases where you really want to disable autofill, our suggestion at this point is to utilize the autocomplete attribute to give valid, semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it.

As an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

What I propose

I suggest adding autocomplete="some-random-string" instead of autocomplete="off" here:

https://github.com/Semantic-Org/Semantic-UI/blob/577ae996568e355cb0141a7cce9ba07bec2ceceb/dist/components/dropdown.js#L328

Other browsers

There is an article at Mozilla developer portal that suggests using autocomplete="something-random" to disable autocomplete.

PS: Sorry if this doesn't make sense, I'm not a frontend developer : (

[mechanicles]

We are facing the same issue and don't want to show chrome autofill in our drop-down search boxes.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[brendonlamb]

This is still an issue for me too, by default it appears the component adds a autocomplete="off" property.

If you simply change that "off" (in dev tools) to "anythingelse" (personally i like "nope" lol) - the Chrome Autofill stops showing and allows the user to actually make a selection.

I like Autofill for somethings but it's ruining a handful of our dropdowns, we definitely need a way to disable it.

Edit- i realize this isn't the SUI react repo, still an issue though.

[gabrielruss]

For a workaround we added onFocus={handleFocus} property on the dropdown component with the below code.

handleFocus = e => { e.target.setAttribute("autocomplete", "nope"); };

[brendonlamb]

@gabrielruss My only concern w/ using "onFocus" is that if the field is already filled out (like, if autocomplete filled out the field already) - the user may not click or focus that field anyway.

[b-jan]

The focus solution is not working for me.
I managed to have a fix not so bad in Vue.js:

in my vue component:

<sui-dropdown
  ref="search"
  fluid
  search
  selection
  :placeholder="placeholder"
  :options="options"
  :value="value"
  @input="emitInput" // I am using custom v-model here
  @change="removeAutocomplete"
/>

the remoteAutocomplete method:

removeAutocomplete ($event) {
  // check the default autocomplete on first change
  if ($event.target.getAttribute('autocomplete') === 'off') {
    // remove the autocomplete behaviour once it is possible
    $event.target.setAttribute('autocomplete', 'nope');
    // unset the Semantic UI search filter to display the default option
    this.$refs.search.filter = '';
  }
},

Hope this can help somebody one day...

[RajuIO]

thanks @gabrielruss it worked for me
For select box

In HTML
onFocus={handleFocus}

In Script File
handleFocus = e => { e.target.setAttribute("autocomplete", "nope"); };

[lubber-de]

The community fork Fomantic-UI fixed this by https://github.com/fomantic/Fomantic-UI/pull/1887