React-select: Placeholder not visible for empty object as value

[tejasjadhav]

When the value parameter is given an empty object, placeholder is not visible. I think, along with null and undefined values, even empty objects {} and empty lists [] should be considered as no value.

For the below code, placeholder is not seen. However, when this.state.value is set as null or undefined, placeholder is visible.

var options = [
    {value: 'apple', label: 'Apple'},
    {value: 'banana', label: 'Banana'}
];

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

        this.state = {
            value: {}
        }
    }

    render() {
        return (
            <Select
                placeholder="Select a fruit"
                value={this.state.value}
                options={options} />
        );
    }
}

[lugy90]

@tejasjadhav Set value as a void string then convert it to a object.

var options = [
    {value: 'apple', label: 'Apple'},
    {value: 'banana', label: 'Banana'}
];

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

        this.state = {
            value: ''   //   set string
        }
    }

   handleChange(option) {
       let obj ={value: option.value, label: option.label};
       this.setState({value: obj});   //  convert to obj
   }

    render() {
        return (
            <Select
                placeholder="Select a fruit"
                value={this.state.value}
                options={options} 
                onChange={handleChange}/>
        );
    }
}

[jonfreedman]

Working with typescript this is quite annoying, I've ended up writing the following, not sure what the intended difference between '' and {} as a value is?

value={Object.keys(identifierValue).length === 0 && identifierValue.constructor === Object ? '' : identifierValue}

[alynnlp]

My code used React, TypeScript with React-Select Async
for controlled value, value needs to be null in order for placeholder to display the text

render() {
     const { id, value } = this.props;
     const currentValue = { label: value };     

 return (
       <SelectList
            placeholder={this.props.placeholder}
            **value={value ? currentValue : null}**
            onChange={this.setQueryValue}
            loadOptions={this.fetchAsyncOption}
            defaultOptions={false}
            inputId={id}
            isClearable={true}
       />

[sclavijo93]

Same here.
I think empty objects {} and empty lists [] should be considered as no value too

[labmanus]

My code used React, TypeScript with React-Select Async
for controlled value, value needs to be null in order for placeholder to display the text

render() {
     const { id, value } = this.props;
     const currentValue = { label: value };     

 return (
       <SelectList
            placeholder={this.props.placeholder}
            **value={value ? currentValue : null}**
            onChange={this.setQueryValue}
            loadOptions={this.fetchAsyncOption}
            defaultOptions={false}
            inputId={id}
            isClearable={true}
       />

alynnlp, this works for me.
Thanks.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!