Safari autocomplete not working on Gatsby input field

Question

I have an input field on my Gatsby site for user's email with an autoComplete attribute. It works fine on Chrome (and on Android) But it doesn't work on Safari Desktop (nor mobile) Any ideas why?

 <input
 type="email"
 id="email"
 name="email"
 label="email"
 placeholder="E-mail*"
 value={customerEmail}
 autoComplete={true}
 onChange={e => handleEmailValidation(e.target.value)}
/>

I've tried adding the label field. Setting autocomplete to email (autocomplete="email") or autocomplete to on (autocomplete="on") but nothing seems to work with Safari.

Answer 1

Try using autoComplete="email". In addition as the docs suggests, check the inheritance and HTML structure of the input field:

Note: In order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to:

• Have a name and/or id attribute
• Be descendants of a <form> element
• The form to have a submit button

 <input
   type="email"
   id="email"
   name="email"
   label="email"
   placeholder="E-mail*"
   value={customerEmail}
   autoComplete="email"
   onChange={e => handleEmailValidation(e.target.value)}
/>