-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Disable Chrome autofill allowing autoComplete="new-password" to be passed into the Input component properties #3500
Comments
I agree that this would be a welcome change. I have been fighting with this for the last couple of days. It is a dealbreaker for our app because the autocomplete control overlays the react-select menu. We have resorted to forking the project, but it would be nice if this were supported natively. |
@rdsedmundo Yes, there is a possibility to configure it. It is hard coded as a prop to the You just have to overwrite the import Select, { components } from 'react-select';
const Input = ({ autoComplete, ...props }) => <components.Input {...props} autoComplete="new-password" />;
<Select
{ ... }
components={{
Input
}}
/>
@kylehurt-rkv Here is your native support, without forking the repository. |
That's a smarter solution than what I did. I knew I could just overwrite the I still can see value of having it configurable though. |
@Rall3n We actually tried that exact solution, but whenever the page would try to load, Chrome would get of memory errors and crash. We are supplying several other custom components into the Select component, so it may be possible that something we did on one of the other custom components was conflicting with custom input component. Or maybe we are doing something in a non-standard way. const styles = theme => ({ class Select extends React.Component { render() {
} Select.defaultProps = { Select.propTypes = { export default withStyles(styles, { withTheme: true })(Select); ` |
@kylehurt-rkv If I´m seeing this correctly, you are creating the custom components inside your Creating the components inside the |
@Rall3n Turns out I was right. I WAS doing something in a non-standard way. Moving the custom components outside of the class took care of the issue I was having with Chrome crashing. Makes sense now that I know the answer. Thank you very much for your insight. |
Seems like there's a good reason to have this |
I have a similar problem in #4006 : I am looking for a way to make sure that the Dashlane autofill icon does not get active in my AsyncComponent which results in a crash of the Chrome browser. Dashlane support hasn't been helpful so far, so if anybody of you has an idea on how to lock Dashlane out of my AsyncComponent, i'd be happy to hear! |
This seems somewhat unnecessary given the existing component api as Rall3n has already mentioned. Here you can already pass in an
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} />
); |
This really needs to be added |
Greetings all, It seems that Google has perhaps changed their stance on this and per the top answer here, In case this isn't correct, I have filed the following comment in the relevant the Chromium bugs thread: https://bugs.chromium.org/p/chromium/issues/detail?id=587466#c591 |
Greetings all, It seems per the above stackoverflow post and in my own testing that newer versions of Chrome do appear to respect "autocomplete=off". If anyone is experiencing any differently, please provide a codesandbox example so we can reproduce and investigate further. If anyone needs or wants to change this attribute on the Input, this is already possible as provided here: #3500 (comment) As such I will be closing this issue, but happy to re-open if we can confirm that this is still an issue. |
Looked into this further and several users are still experiencing autoComplete from Chrome. I will reopen this. |
This is still a problem in safari and setting custom input component and It may have something to do with situational rendering Wrapping with this works Wrapping with this does not work edit: |
Safari is disregarding autocomplete='off' and still showing the browser autocomplete for the select action field in the alerts creator. This is due to the first/default option being set as Email, so having an invisible character to break up the word seems to fix this. Seems to be an open issue with react-select and the other solutions mentioned here don't work for Safari JedWatson/react-select#3500. FIXES WOR-1779
Safari is disregarding autocomplete='off' and still showing the browser autocomplete for the select action field in the alerts creator. This is due to the first/default option being set as Email, so having an invisible character to break up the word seems to fix this. Seems to be an open issue with react-select and the other solutions mentioned here don't work for Safari JedWatson/react-select#3500. FIXES WOR-1779
<Input
{...commonProps}
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
id={id}
innerRef={this.getInputRef}
isDisabled={isDisabled}
isHidden={inputIsHidden}
onBlur={this.onInputBlur}
onChange={this.handleInputChange}
onFocus={this.onInputFocus}
spellCheck="false"
tabIndex={tabIndex}
form={form}
type="text"
value={inputValue}
{...ariaAttributes}
/> I see that search input is hardcoded to |
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 passautoComplete="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:
react-select/src/Select.js
Line 1401 in ba76246
And it gets passed to the default Input component here:
react-select/src/components/Input.js
Line 53 in ba76246
As you can see, there's no way of configuring that property manually.
The text was updated successfully, but these errors were encountered: