Change Browser Defaults for React InstantSearch

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:

• How to disable autocomplete on MDN
• Autocomplete attribute on MDN
• Autocorrect attribute on MDN
• Autocapitalize attribute on MDN
• Spellcheck attribute on MDN