Options do not get updated when deselecting last selected option

[omargamal8]

Hi I am using the library in my project which is really helpful but I am having an issue. When I have a method that updates the options on everytime an option gets deselected, which works fine untill the last selected option gets deselected, the option list does not get updated as it should.

I've written a minimum example to reproduce it.

import React, { Component } from 'react';
import { Multiselect } from 'multiselect-react-dropdown';

class MsDropDown extends Component{
    constructor(){
        super();
        this.state = {
            options: [{text:"old option"}],
        }
        this.handleRemove  = this.handleRemove.bind(this);
    }

    handleRemove(item, selected){
        this.setState(
            {options:{text:"new option"}})
    }    
    render(){
        console.log("RENDER", this.state.options)
        return <Multiselect
        options={this.state.options}
        displayValue="text"
        hidePlaceholder="true"
        avoidHighlightFirstOption="true"
        style={{option:{color:"black"}}}
        onRemove={this.handleRemove}
      />
    }
}

export default MsDropDown

I also have these screen shots to describe the steps.

So at first the old option is rendered normally.

After I have the option selected

I will deselect the option and expect the new options list to have the option "new option" but instead it still shows "old option".

I really hope I can get a fix because I really like using the component. Thanks

[npercell]

I have the same issue. :(

[omargamal8]

@npercell I found a work around. The list just needs to be rerendered when the last selected option is deselected. So in my case I called another extra setState when all options are deselected and it's working well.

[david-deepblocks]

This was happening to me too. Here is what I was doing.

let selectedList = getSelectedList(...);
let unselectedList = getUnselectedList(...);

<Multiselect
  options={unselectedList}
  selectedValues={selectedList}
  onSelect={(selectedList, allowedUse) => ...  // update `selectedList` and `unselectedList`}
  onRemove={(selectedList, allowedUse) => ... // update `selectedList` and `unselectedList`}
  ...
/>

I realized I was manually updating the options prop (i.e. unselectedList), which I should not have done. After passing the complete list to the options prop without modifying it, it worked as expected. The component will internally manage the state of both the options list and the selected list. The selectedValues prop was still passed in to initialize the Multiselect component. Hope this helps.

[nitin992503]

Hey guys, I was facing same issue. I think I found the root cause of this issue. https://github.com/srigar/multiselect-react-dropdown/blob/fb1b9f284e25b20cf362220fee999cfb7f6b6679/src/multiselect/multiselect.component.tsx#L139

here the options is getting picked up from state. So if you selected the option and then later deselected it from code, the deselected option will not come back.