Skip to content

Turn off autocomplete #758

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

Closed
tnrich opened this issue Feb 4, 2016 · 8 comments
Closed

Turn off autocomplete #758

tnrich opened this issue Feb 4, 2016 · 8 comments

Comments

@tnrich
Copy link
Contributor

tnrich commented Feb 4, 2016

Hey there,

Thanks for the excellent component.

I believe most browsers respect an autocomplete='off' rule: http://www.w3schools.com/tags/att_input_autocomplete.asp

I tried to apply an autocomplete='off' rule to the react-select box, but couldn't seem to get it to work. Is this something that other people have been able to do? And if not, I'd like to formally request the feature.

Thanks!
Thomas

@slybridges
Copy link
Contributor

I'm wrapping the component doing this:

<Select
  // ... other props
 inputProps={{ ...inputProps, autoComplete: 'off', autoCorrect: 'off', spellCheck: 'off' }}
/>

@tnrich
Copy link
Contributor Author

tnrich commented Feb 5, 2016

Thanks for the tip, I'll try that out!

On Fri, Feb 5, 2016, 1:55 AM Sly Bridges [email protected] wrote:

I'm wrapping the component doing this:

<Select
// ... other props
inputProps={{ ...inputProps, autoComplete: 'off', autoCorrect: 'off', spellCheck: 'off' }}/>


Reply to this email directly or view it on GitHub
#758 (comment)
.

@tnrich
Copy link
Contributor Author

tnrich commented Feb 5, 2016

Hey @slybridges , so I've tried to follow your suggestion, but can't seem to get it to work. Here's my code:

<form>
...other inputs...
<Select
          inputProps={{autoComplete: 'off', autoCorrect: 'off', spellCheck: 'off' }}
          {...country}
          onBlur={() => country.onBlur(country.value)}
          className='UserInfoPageInput countryDropdown'
          sectionName='countriesDropDown'
          searchable={true}
          clearable={true}
          label='Country'
          placeholder="Country"
          options={COUNTRIES} 
        />
...other inputs...
</form>

But chrome goes right ahead and keeps placing a cursor in the box and filling in "United States". Here's a screenshot of that:

image

Do you have any other suggestions for getting this to work? Am I doing something incorrectly?

Thanks for the help!
Thomas

@tnrich
Copy link
Contributor Author

tnrich commented Feb 9, 2016

Hey @slybridges , I looked further into the issue and it seems like my issue was caused by chrome ignoring the "off" parameter. Changing it to a random string, like "none" fixed it:

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

Thanks for the tip!

@tnrich tnrich closed this as completed Feb 9, 2016
@slybridges
Copy link
Contributor

Thanks for the feedback & tip @tnrich !

@enteeee
Copy link

enteeee commented Jan 22, 2018

Does it work for Safari browsers? When i set
inputProps={{autoComplete: 'nope' }} it doesn't work for Safari browsers.

@ifenega
Copy link

ifenega commented Jun 15, 2024

Does it work for Safari browsers? When i set inputProps={{autoComplete: 'nope' }} it doesn't work for Safari browsers.

any update on this question? cause i am having the same issue

@mitchellgsides
Copy link

I'm having the same problem, still. I can't figure out any way around it on Safari.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants