I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the input field remains highlighted. Despite my efforts to inspect the CSS using Chrome DevTools, I haven't been able to identify what is causing this.
This problem persists across all textfields at the moment, even after removing any custom styles applied to the component.
It's difficult to articulate in words, so I've included some screenshots below:
Before: https://i.sstatic.net/iez0l.png
After:
https://i.sstatic.net/Ac5Gw.png
The highlighting remains even after clicking away and selecting another element. Interestingly, this behavior doesn't occur when typing in a password field.
Component:
const useStyles = makeStyles(theme => ({
border: {
'& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: theme.palette.secondary.main
},
width: '75%',
alignSelf: 'center'
},
})
const LoginForm = () => {
const classes = useStyles();
<TextField
name='password'
type='password'
value={formik.values.password}
className={classes.border}
variant='outlined'
label='Password'
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.touched.password && Boolean(formik.errors.password)}
helperText={formik.touched.password ? formik.errors.password : ''}
/>
}