add autoComplete as prop to the Select component

[bladey]

Based off PR #3666 by @lvl99

Updated tests and other misc changes.

As mentioned in issue #3500 and #2395 and having my own need to set an explicit autoComplete value (namely to prevent Google Chrome from showing its autofill drop-down on top of the react-select drop-down) I've attempted a quick simple fix.

[changeset-bot]

💥 No Changeset

Latest commit: 36d0651

Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂

If these changes should be published to npm, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 36d0651:

Sandbox	Source
react-codesandboxer-example	Configuration

[bladey]

@JedWatson to be reviewed on commented on.

[gotrecillo]

please this is super needed to avoid that awful address manager of chrome

[CoOlDud3]

Any updates on this?

[Thorvarium]

My project is also super needing this!

[graham-saunders]

This would be a great addition to react-select. Any updates?

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this PR on the fork and we can get it merged and released.

EDIT: 🎉 I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[ebonow]

This seems somewhat unnecessary given the existing component api.

Working demo: codesandbox

const Input = (props) => {
  const { autoComplete = props.autoComplete } = props.selectProps;
  return <components.Input {...props} autoComplete={autoComplete} />;
};

const MySelect = (props) => (
   <Select components={{ Input }} autoComplete="new-password" options={options} />
);

[cullylarson]

@ebonow Your solution doesn't work for me using autoComplete='address-level1'. The field is filled, but is then immediately cleared and the select is focused. Not sure if this is an issue with react-select focusing the field after input, which somehow triggers the field to be cleared (e.g. race condition), or potentially an issue with controlled form state.

UPDATE: Looked into this a bit more. The problem seems to be that the browser filling the field does not trigger react-select's onChange event. So if you're controlling form state, you'll never get notified that the field changes and on next render the form will be cleared.

[ebonow]

@cullylarson Adding autoComplete to the input prop will add the attribute to the input, but using the autoFill selection is a different conversation.

In regards to your findings, you are also correct. An autoFill selection does not trigger the onChange event. The issue is that browser support for autoFilling inputs is neither standard nor well supported. Here is an older SO link highlighting the issue. The first posted answer gives some specific details, whereas the second answer gives a solution as to how to accomplish detecting an autoFill change by the animationStart/End events.

In fact, that solution appears to be at the core of an open react-select PR to support what it sounds like you are looking for #2395

The issue with it, is that it only seems to be supported by Webkit browsers which may be good for most, but likely wouldn't be a good fit for integrating into the react-select library code without a more complete solution.

I am open to conversation but the present api should be enough to roll your own version. I truly believe that the goal of react-select is not to be everything for everyone but instead to provide the tools be anything for anyone, which this seems to fulfill.