What I have

I have a MUI Autocomplete component inside React.

Goal

I would like to sanitize the input typed into it so the user can't enter characters that wouldn't make sense anyway.

What I tried

I created a native and an <Autocomplete> input too. I passed the controlled value for both the element and the input under it.

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}
        onChange={(_, value) => { setValue(sanitize(value || '')) }}
        freeSolo
        renderInput={(params) => (
          <TextField {...params} label="Value" value={value} onChange={(e) => {
            setValue(sanitize(e.target.value))
          }} />
        )}
      />
    </>
  )
}

Problem

The native one works, so it isn't the update logic messing up things. The MUI one is acting weird: typing in letters doesn't get filtered out, but when I type a number after them the letters disappear.

What I have

I have a MUI Autocomplete component inside React.

Goal

I would like to sanitize the input typed into it so the user can't enter characters that wouldn't make sense anyway.

What I tried

I created a native and an <Autocomplete> input too. I passed the controlled value for both the element and the input under it.

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}
        onChange={(_, value) => { setValue(sanitize(value || '')) }}
        freeSolo
        renderInput={(params) => (
          <TextField {...params} label="Value" value={value} onChange={(e) => {
            setValue(sanitize(e.target.value))
          }} />
        )}
      />
    </>
  )
}

Problem

The native one works, so it isn't the update logic messing up things. The MUI one is acting weird: typing in letters doesn't get filtered out, but when I type a number after them the letters disappear.

• javascript
• reactjs
• material-ui
• autocomplete

Share Improve this question Follow asked Mar 6 at 14:44 totymedlitotymedli 31.2k2222 gold badges139139 silver badges170170 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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))
          }} />
        )}
      />
    </>
  )
}