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

Question

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

Answer 1

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