How to disable browser autofill?


I have build an accessible typeahead input (using proper ARIA roles etc). The code is written in ReactJS but the problem that I have is beyond the framework's capabilities. Here is what my code looks like:

<input type="text" autoFocus={autoFocus} name={name} placeholder={placeholder} onChange={handleChange} value={inputVal} ref={inputRef} onKeyDown={handleKeyDown} onFocus={handleFocus} autocomplete="off" aria-autocomplete="list" aria-controls={`${name}-lb`} aria-activedescendant={ focused && activeItem !== -1 ? `${name}-lb-item-${activeItem}` : '' } hasErrors={hasErrors} /> 

The issue is that, whatever I do, I keep having autocomplete displayed. It doesn't matter if the input is in a form or not. This issue exists in Firefox, Chrome, and Safari. I have tried eveerything:

  1. Remove All ARIA attributes
  2. Add autocomplete="djndkjfndk" (random text) to form or input. Even if I do not have a form, I get the browser's autofill.
  3. Add autocomplete="off" to form or input. Even if I do not have a form, I get the browser's autofill.
  4. Randomize input names. So, if I have an input name "user", I add the name as "user_1558806030," where the number is epoch time; so, there is not way to have the same name in input.
  5. (EDIT: ADDED this item). Remove name property from input altogether. This still doesn't work. It works sometimes but not all the time.

None of the things that I tried help me. I keep getting all the contacts list shown in Safari, Firefox, and Chrome. What can I do to properly disable this behavior as it is ruining the user experience significantly.

submitted by /u/GasimGasimzada
[link] [comments]

from web_design