javascriptreactjsfluent-uifluentui-react

Detail List Multi Select get latest selected/unselected item not working

Actual Behavior

Detail List Multi Select get latest selected/unselected item not working properly If I use below code am facing this issue

this._selection = new Selection({
      onSelectionChanged: () => {
        // Multi Select get latest selected item 
        // And Find how to get selected/unselected status for particular item
        console.log(this._selection.getSelection()); // getSelection gives only array of         items[] not latest item selected 
      },
    });

If I use onActiveItemChanged default detail list behavior able to get latest item but once scenario its bug like first item selected (items is printed) if unselected the same first item unable to get unselected item.

Expected Behavior

Below is my Code Pen CodePen Link

Solution

  • You can try something like this.

    this._selection = new Selection({
  onSelectionChanged: () => {
    this.setState({ selectionDetails: this._getSelectionDetails() });
        
    const currentIndex = this._selection._anchoredIndex;
    const element = this._allItems.find(item => item.key === currentIndex);
    const isItemSelected = currentIndex in this._selection._exemptedIndices;
        
    console.log("latest selected/unselected item is", element, "and status is", isItemSelected);
  },
});

    _selection item gives us some data and using that we can get what is current selected data.