Disable Chrome autofill allowing autoComplete="new-password" to be passed into the Input component properties

Currently, the default Input component is forcefully setting autoComplete="off" which doesn’t disable Chrome’s autofill functionality on latest browser versions. For achieving that, we need to pass autoComplete="new-password".

The problem is that the value is hardcoded and can’t be configured unless we implement our own Input component and configure this property properly there.

It’s hardcoded here: https://github.com/JedWatson/react-select/blob/ba76246a92fe9371b5d4f8795d30119b045dcaba/src/Select.js#L1401

And it gets passed to the default Input component here: https://github.com/JedWatson/react-select/blob/ba76246a92fe9371b5d4f8795d30119b045dcaba/src/components/Input.js#L53

As you can see, there’s no way of configuring that property manually.

[Rall3n]

As you can see, there’s no way of configuring that property manually.

@rdsedmundo Yes, there is a possibility to configure it. It is hard coded as a prop to the Input component, that is true. But this library offers in its current version the possibility to overwrite its internal components using its components framework.

You just have to overwrite the Input component and overwrite the prop being passed to the component.

import Select, { components } from 'react-select';

const Input = ({ autoComplete, ...props }) => <components.Input {...props} autoComplete="new-password" />;

<Select
    { ... }
    components={{
        Input
    }}
/>

We have resorted to forking the project, but it would be nice if this were supported natively.

@kylehurt-rkv Here is your native support, without forking the repository.

[lvl99]

Seems like there’s a good reason to have this autoComplete configurable, as based on the age and responses of https://github.com/JedWatson/react-select/pull/2395