autoComplete "on" not working in ReactJs form

Question

I have below form in react for which i need to implement "autoComplete="on" so that next time if users want to input same value, it should be suggested as auto complete.Below is my code

<form className={classes.container} noValidate>
  <Grid container item xs={12} alignItems="center">
    <TextField
      id="outlined-bare"
      className={classes.textField1}
      defaultValue=""
      margin="normal"
      variant="outlined"
      autoComplete="on"
      InputProps={{ style: { height: 40 } }}
      onChange={(e) => handleChange(e, 'Name')}
    />
  </Grid>

The component is being rendered is Chrome browser. What's wrong or missing here?

Answer 1

With controlled components the HTML attribure "autocomplete" doesn't work properly if the state is not handled gracefully.
use this library: https://www.npmjs.com/package/ghostcomplete
Simply install and import in your entry point and use anywhere in the app just by two lines:
import ghostcomplete
Then in your input add this.
data-autocomplete="your-group"
You can group the input fields like a group name for all search fields use that and it'll suggest that throughout all fields and adapts to each user writing style.