Material-UI Autocomplete is not working when setting TextField InputProps

Question

I'm using Material-UI Autcomplete component (Free solo version) and everything is working fine until I tried to change the color of the text (inside the TextField).

My code looks like this:

const moreClasses = {
    label: { style: { color: 'blue' } },
    input: {
        style: {
            color: 'red',
            borderBottom: `1px solid green`
        }
    }
};
//...
<Autocomplete
    //... classic props as in the official Doc
    renderInput={params => <TextField 
        {...params} 
        label={'label'} 
        InputLabelProps={moreClasses.label}
        InputProps={moreClasses.input} />
/>

Expected behavior

When you start typing you can see the autcomplete and the text you type should have a red color.

Actual behavior

The text color is red but the autocomplete is not working anymore.

I created this live running example to illustrate the problem with 3 components:

• The Text Field only (works)

• The Autocomplete without changing the color using InputProps (works)

• The Autocomplete with changing the color using InputProps (does not work)

Note

By setting InputLabelProps the autocomplete continue working and the color of the label is changed (to blue in the example I shared)! So I can't figure it out why it's not working when setting InputProps.

Any feedback about this issue ?

Answer 1

Passing InputProps 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.

You can fix this by combining params.InputProps with your additional InputProps such as in the following code:

InputProps={{ ...params.InputProps, ...moreClasses.input }}

Autocomplete also passes InputLabelProps, so even though it doesn't break in as obvious of a manner, you should do the same for InputLabelProps:

InputLabelProps={{ ...params.InputLabelProps, ...moreClasses.label }}

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