1

Passing style to inputProp={} inside an Material UI Autocomplete would create an "useAutocomplete.js:919 Uncaught TypeError: Cannot read property 'focus' of null" error. Here is the example code:

renderInput={params => (
          <div>
            <TextField
              multiline={false}
              classes={{
                root: classes.textField
              }}
              {...params}
              variant="outlined"
              placeholder="Search"
              inputProps={{ classes: { root: classes.text } }}
            />
          </div>
)}

I do not really understand the Problem, are there any suggestions?

Grafgurke
  • 27
  • 1
  • 8

2 Answers2

0

inputProps is actually different from InputProps

inputProps definition:

Attributes applied to the input element.

InputProps definition:

Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.

In your scenario, you are going to want to use the 1 with capital I (i.e., InputProps)

Refer to: https://material-ui.com/api/text-field/#props

95faf8e76605e973
  • 13,643
  • 3
  • 24
  • 51
0

I found the solution here:

Setting text color, outline, and padding on Material-ui Autocomplete component

"Here is the approach you tried (which worked as far as styling, but broke the Autocomplete functionality):

renderInput={params => (
    <TextField
       {...params}
       label=""
       InputProps={{
          className: classes.inputColor
       }}
       variant="outlined"
       fullWidth
    />
)}

The above approach causes problems because the Autocomplete component passes InputProps as part of the params passed to TextField so the InputProps passed explicitly will completely replace the InputProps in params.

Instead, you should leverage the inputRoot CSS class for the Autocomplete component:

<Autocomplete classes={{inputRoot: classes.inputRoot}} .../>

"

Grafgurke
  • 27
  • 1
  • 8