Reset the display of the placeholder inside a select

Ask a question
15

After choosing an option in my Select (using react-select), I use “onChange” to do something using the value chosen, and then I would like to display the initial placeholder in the select instead of the chosen value that is still here…. I tried to add a ref on the select and give the select.value a null value but nothing happened.

addTravellers(event){
    this.setState({travellers : this.state.travellers.concat(event.value)},()=>this.checkPax(this.state.travellers));
  }

<Select 
        options={ages}
        placeholder={"my placeholder"}
        className={s.selector}
        onChange={(e) => this.addTravellers(e)}
        ref={this.refSelect}
        />

The result I would like is after addTravellers is called, the select display the placeholder instead of the last selected value.

Coin iconoffer bounty
add comment

1 Answer

12

If I understand correctly, you want the onChange callback to be fired when the user selects an option however you want the placeholder to remain visible regardless of user selection - in that case a simple solution would be to force null as the value prop of <Select /> which will cause the placeholder to remain visible after option selection occurs:

<Select 
    options={ages}
    placeholder={"my placeholder"}
    className={s.selector}
    onChange={(e) => this.addTravellers(e)}
    value={ null } /* <-- add this */
    /* ref={this.refSelect} Not needed */
    />
add comment

Your Answer