srigar / multiselect-react-dropdown

React multiselect dropdown with search and various options
https://10xn41w767.codesandbox.io/
MIT License
200 stars 114 forks source link

Options do not get updated when deselecting last selected option #81

Open omargamal8 opened 4 years ago

omargamal8 commented 4 years ago

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. image

After I have the option selected image

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

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

npercell commented 3 years ago

I have the same issue. :(

omargamal8 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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.