Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

Conversation

jordanlapointe
Copy link

Currently, react-autocomplete inputs are set to have an HTML autocomplete attribute value of "off". This is smart for preventing a stacking of autocomplete UIs, but can cause problems in some scenarios.

For example, a checkout form may have an address field with as-you-type suggestions shown using react-autocomplete. A user would expect to be able to click on the name field, click a browser-provided suggestion, and have all saved fields fields completed (including name, address, state and zip). Because of the hardcoded "off" value, all fields in this scenario will autofill except for the address field, leading to confusion for the user.

I propose allowing developers to set the autocomplete attribute with the current value as a fallback. This would enable setting the attribute based on focus—only setting the attribute to "off" when the react-autocomplete input is in use.

Example:
screen shot 2017-03-28 at 3 21 22 pm

@naoisegolden
Copy link

naoisegolden commented Jul 13, 2018

My solution to this was to define the renderInput prop:

renderInput: props => <input {...props} autoComplete='new-password' />;

aria-autocomplete="list"
aria-expanded={open}
autoComplete="off"
autoComplete={inputProps.autoComplete || 'off'}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the prop it sets should default to new-password

@bigsauron
Copy link

Is there a chance for this PR to be merged?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants