Answer by totymedli for How to sanitize MUI autocomplete input? It doesn't update on keypress

tl;dr

Pass the controlled value to the inputValue prop.

Read the docs

The component has two states that can be controlled:

• the "value" state with the value/onChange props combination. This state represents the value selected by the user, for instance when pressing Enter.
• the "input value" state with the inputValue/onInputChange props combination. This state represents the value displayed in the textbox.

Solution

When you need to control and manipulate the input field's value. You need to pass the inputValue prop, you don't do that through the input field's value prop via renderInput. Remove that part.

const Form = () => {  const sanitize = value => value.replace(/[^0-9:]/g, '')  const [value, setValue] = useState('')  return (<><input type="text" value={value} onChange={(e) => { setValue(sanitize(e.target.value)) }} /><Autocomplete        options={['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']}        value={value}        inputValue={value}        inputValue={value}        onChange={(_, value) => { setValue(sanitize(value || '')) }}        freeSolo        renderInput={(params) => (<TextField {...params} label="Value" onChange={(e) => {            setValue(sanitize(e.target.value))          }} />        )}      /></>  )}