Change Browser Defaults for React InstantSearch Hooks
On this page
Introduction
When a user start typing to an HTML input, there might be a legacy auto-completion feature displayed.
In this tutorial we’ll see how to disable this behavior.
Input markup
A classic the search html input definition looks like:
1
<input type="text" id="search" />
Updating input markup
There are four input attributes that we can define to cancel default browsers’ behavior:
autocomplete="off"autocorrect="off"autocapitalize="none"spellcheck="false"
Note that autocomplete="off" doesn’t work on Chrome, which will only disable autocomplete with an invalid value like autocomplete="nope". See MDN on disabling autocompletion
Since this value is not a valid one for the autocomplete attribute, the browser has no way to match it, and stops trying to autocomplete the field. Please note that this does not work in Firefox; it completely disregards the invalid value and reverts to default autocompletion behavior.
The updated input should look like this:
1
2
3
4
5
6
<input type="text"
id="search"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
spellcheck="false" />
More information on input properties
For more information check out the reference of each of those attributes:
