CODEWITHSUNDEEP
reactjsmaterial-ui
Yasin
Yasin

Reputation: 1242

How to resove label overlapping issue for React Material UI auto complete component

I am new to react material UI. I want floating label for auto complete component. but after selecting any value from the auto complete options label should stick on the top. Please goto codesandbox see the actual problem.

Thanks in advance

Upvotes: 4

Views: 16929

Answers (2)

KManish
KManish

Reputation: 1871

shashidhara is right. I used the below code

<InputLabel id={attributeGroupAttribute.AttributeId+'_label'} 
                        className='bg-white' shrink={selectedValue !== null && selectedValue !== ''}
                        >{attributeDetails.Name}</InputLabel>

This was driving me nuts. Thanks a ton. The key part is the code below

shrink={selectedValue !== null && selectedValue !== ''}

Upvotes: 0

Shashidhara
Shashidhara

Reputation: 683

You need to update the property of select element, after selection is made. For that I am using the state shrink, which is false initially, that will set true once the item is selected. If the state shrink is true, then InputLabelProps is set with {shrink: true}. Otherwise empty object is set.

state = {
    single: null,
    multi: null,
    shrink:false //Newly added
};    

handleChange = name => value => {
    this.setState({
       [name]: value
    });

    this.setState({shrink:true}); //Newly added
}; 

<Select
    classes={classes}
    styles={selectStyles}
    options={suggestions}
    components={components}
    value={this.state.single}
    onChange={this.handleChange("single")}
    placeholder="Search a country (start with a)"
    textFieldProps={{
        label: "Label",
        InputLabelProps: this.state.shrink?{shrink:true}:{} //Modified line
    }}
/>

Demo

Upvotes: 9

Related Questions