Expose input autocomplete attribute in Combobox and Input

Newer versions of Chrome completely ignore autocomplete="off". So if you have something like a ComboBox of States and you want to allow a user to filter the options via input, Chrome might recognize the input as part of an Address and try to autofill the State.

A possible solution is to set autocomplete="some_invalid_value" which causes Chrome to not prompt for an autofill value.

The problem with that is, Firefox will default to using autocomplete="on" on invalid values.

Per https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion:

In some cases, the browser will continue suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really enforcing non-autocompletion is to assign an invalid value to the attribute, for example:

autocomplete="nope"

Since this value is not a valid one for the autocomplete attribute, the browser has no way to match it, and stops trying to autocomplete the field. Please note that this does not work in Firefox; it completely disregards the invalid value and reverts to default autocompletion behavior.

In my mind, the only solution is to do a quick browser check before setting any hard values for autocomplete like https://github.com/salesforce/design-system-react/blob/master/components/combobox/combobox.jsx#L809.

Thanks

[interactivellama]

Yes @davidlygagnon that’s great idea! Let’s add autocomplete to Input.

As part of that, can you pull the Input prop out of https://github.com/salesforce/design-system-react/pull/1430 so that <Combobox input={<Input autocomplete="GIBBERISH"} /> can handle this for the Combobox via props spread composition.

The developer’s passed in component controlled by the “grandparent” takes precedence and merges in last.

[curiosity26]

Just commenting to keep this alive. Still an issue