Cannot set value

[SirCoop]

"@material-ui/core": "^4.1.2", "react": "^16.8.0", Chrome Version 73.0.3683.75 (Official Build) (64-bit)

Using this code, if I set the value prop on the SingleSelect, the initial value will get set when the component renders but the change handler will not fire thereafter.

If I remove the value prop, the change handler fires properly, and I can select and create but I cannot set initial value on page load.

See code below:

import React from 'react'; import { SingleSelect } from 'react-select-material-ui';

class Test extends React.Component { constructor(props) { super(props);

this.state = {
  inputVal: 'Josh',
};

}

handleChange = (value) => { console.log(value); this.setState({ inputVal: value }); };

render() { const { inputVal } = this.state; const options = ['Africa', 'America', 'Asia', 'Europe', 'Josh'];

return (
  <div className="App">
    <SingleSelect
      placeholder="Select a continent"
      options={options}
      onChange={this.handleChange}
      SelectProps={{
        isCreatable: true,
        isClearable: true,
      }}
      value={inputVal}  // onChange will not fire if this is present. also cannot select any option
    />
  </div>
);

} }

export default Test;

[iulianraduat]

Hi SirCoop,

I can reproduce your problem. It will be fixed soon.

In the mean time you can use defaultValue instead of value. DefaultValue makes the component uncontrolled, compared with using value which makes it controlled.

Cheers, Iulian

[iulianraduat]

Hi SirCoop,

The fix was published with v4.1.0. Please check it and let me know if there is still something to be fixed.

Thanks, Iulian