Woes of `autocomplete` in Chrome

tl;dr here’s the solution. Please feel free to continue reading for the reasoning:

On focus of the input, set the autocomplete attribute on the input element to ‘chrome-off’, but do so only on focus! Chrome, keeps count of how many autocomplete=”chrome-off” elements exist, and if it exceeds 5, it ignores the rest! If we remove the autocomplete attribute on blur, then it seems to be fine.

React implementation below:

export const useAutoComplete = (ref, { autoComplete, onFocus, onBlur }) => useMemo(() => ({
   autoComplete,
   onBlur: autoComplete ? onBlur : (...args) => {
     ref.current.removeAttribute('autocomplete');
     onBlur && onBlur(...args);
   },
   onFocus: autoComplete ? onFocus : (...args) => {
     ref.current.setAttribute('autocomplete', 'chrome-off');
     onFocus && onFocus(...args);
   }
}, [ref, autoComplete, onFocus, onBlur]);

And on the input:

const ref = useRef();
<Input {...useAutoComplete(ref, props)} ref={ref} {...props} />

Have you ever needed to prevent auto complete drop downs from showing up in an input? Do a quick google search of “Turn off autocomplete, Chrome HTML.” I’ll wait.

What was the most prominent result? Was it this link? That’s where I started my little journey…255 comments as of writing this. Here are some suggestions

• autocomplete=”off” (recommended here by MDN)
• Having a hidden input and a visible input (Accessibility nightmare)
• autocomplete=”false”
• Setting readonly then, on focus, remove it (messes with our styling)
• autocomplete=”new-password” (also recommended by MDN)
• autocomplete=”randomStringOfText”
• autocomplete=”chrome-off”

If you’re really bored, go try those. If you don’t have time, like 98% of the engineers I know, here’s the answer:

None of them work consistently in chrome.

Chrome actively ignores autocomplete! I would love to sit down and have a drink with the person behind that decision and ask them why they push poor accessibility options and/or horrible user experiences on our users, but that likely won’t happen.

After experimenting with all of the values of autocomplete and finding they did not work. Chrome-off was the most promising, but did not work consistently. I later found out this was because it counts the number of elements that exist with autocomplete set to chrome-off.

I read many, many threads trying to solve this in an accessible and reasonable way. I continued to find limited success in many of the options. On focus + autocomplete=”off” worked, but only for the first 5 inputs on the screen. I then tried to do on focus + on blur to remove the autocomplete=”off” and ensure less than 5 exist on the screen…lo and behold, it worked!

At a glance, this appears to appropriately disable auto complete across browser.