CODEWITHSUNDEEP
reactjsmaterial-ui
Ala Eddine JEBALI
Ala Eddine JEBALI

Reputation: 7821

Material-UI Autocomplete is not working when setting TextField InputProps

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:

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 ?

Upvotes: 13

Views: 5424

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80966

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

Edit cool-sara-5l79o

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

Upvotes: 19

Related Questions