Remove selected option from multiselect with mouse?

[NoraCodes]

Would it be possible (or is there a way to do this with the API) to optionally allow clicking on a selected option to unselect it in the MultiSelect? Having to use the keyboard is kind of annoying.

[mufasa71]

@LeoTindall You can implement this with renderValue

     renderValue = ({ label, value }) => {
    return (
        <div className="simple-value">
            <span>{label}</span>
            <button
                type="button"
                onClick={this.handleOnRemoveItemClick.bind(this, value)}>Delete</button>
        </div>
    );
      };

[sverrejb]

@mukimov How would you implement handleOnRemoveItemClick?

[mufasa71]

@sverrejb

MultiSelect has value prop, which indicates currently selected options. You can implement onValuesChange and store selected values in your state.

  handleOnValuesChange = (values) => {
    this.setState({ values });
  }     

  handleOnRemoveItemClick(selectedValue) {
    this.setState(({ values }) => {
       return {
         values: values.filter(v => v !== selectedValue),
       };
     });
   }

   render() {
     return <MultiSelect value={this.state.selectedValues} onValuesChange={this.handleOnValuesChange} />;
   }