CODEWITHSUNDEEP
htmlreactjsformstailwind-css
onlit
onlit

Reputation: 778

Html Autocomplete Input not working in React

I've created a form and would like have autocompletion. so users can select emails suggested by the browser. I used to add autocomplete='on' to inputs or forms in Html and it worked. but the same thing isn't working in React. I'm using tailwindcss not sure If it's related to it. any suggestions?

<form
  autoComplete='on'
>
  <input
    type='email'
    autoComplete='on'
    value={claimerEmail}
    onChange={(e) => setClaimerEmail(e.target.value)}
    className='block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-700 dark:focus:border-gray-700 sm:text-sm dark:text-gray-200 dark:border-gray-800 dark:bg-brand-secondary'
  />
</form>

enter image description here

Upvotes: 2

Views: 2396

Answers (1)

onlit
onlit

Reputation: 778

I managed to fix this by adding the name attr like so.

<form>
  <input
    type='email'
    name='email'
    value={claimerEmail}
    onChange={(e) => setClaimerEmail(e.target.value)}
    className='block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-700 dark:focus:border-gray-700 sm:text-sm dark:text-gray-200 dark:border-gray-800 dark:bg-brand-secondary'
  />
</form>

Upvotes: 3

Related Questions