How to hide browser autocomplete with React Material UI Autocomplete and TextField?

Sometimes, we want to hide browser autocomplete with React Material UI Autocomplete and TextField.

In this article, we’ll look at how to hide browser autocomplete with React Material UI Autocomplete and TextField.

How to hide browser autocomplete with React Material UI Autocomplete and TextField?

To hide browser autocomplete with React Material UI Autocomplete and TextField, we can set inputProps.autocomplete to 'off'.

For instance, we write:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

const fruits = [
  { name: "Apple", value: "apple" },
  { name: "Orange", value: "orange" },
  { name: "Grape", value: "grape" }
];

export default function App() {
  return (
    <div>
      <Autocomplete
        options={fruits}
        getOptionLabel={(option) => option.name}
        getOptionValue={(option) => option.value}
        renderInput={(params) => {
          const inputProps = params.inputProps;
          inputProps.autoComplete = "off";
          return (
            <TextField
              {...params}
              inputProps={inputProps}
              label="Combo box"
              variant="outlined"
              onBlur={(event) => console.log(event.target.value)}
              fullWidth
            />
          );
        }}
      />
    </div>
  );
}

We set inputProps.autoComplete to 'off' in the renderInput function to disable browser autocomplete in the text field.

Conclusion

To hide browser autocomplete with React Material UI Autocomplete and TextField, we can set inputProps.autocomplete to 'off'.