MultiList no re-filtering when an item is selected.

[furkanayilmaz]

Hello,

I am using MultiList component and I implemented a filtering option that filters asc, and by count. Both these options work just fine but when an item is selected from the List and you try to filter it either by asc, or count it just does not work. The filtering prop is being passed just fine, but it is not re-filtering when an item is chosen from the list.

Version: "@appbaseio/reactivesearch": "^3.28.0",

@siddharthlatest Help would be appreciated.

constructor(props) {
    super(props);
    this.state = {
      sortAlphabetically: false,
      anchorEl: null
    };

    this.handleMenuOpen = this.handleMenuOpen.bind(this);
    this.handleMenuClose = this.handleMenuClose.bind(this);
    this.handleSort = this.handleSort.bind(this);
  }

  handleMenuOpen(event: React.MouseEvent<HTMLElement>) {
    this.setState({ anchorEl: event.currentTarget });
  }

  handleMenuClose() {
    this.setState({ anchorEl: null });
  }

  handleSort(sortAlphabetically: boolean) {
    this.setState({ sortAlphabetically, anchorEl: null });
  }

  render = () => {
    const { sortAlphabetically, anchorEl } = this.state;
    return (
      <>
        <MultiList
          className="data-filter"
          componentId={INSTRUMENT_REACTIVE_ID}
          dataField="instrument.keyword"
          title={
            <div style={{display: 'flex', justifyContent: 'space-between'}}>
              <span>Instrument</span>
              <FilterAltIcon onClick={this.handleMenuOpen} style={{ cursor: 'pointer' }} />
              <Menu
                anchorEl={anchorEl}
                open={Boolean(anchorEl)}
                onClose={this.handleMenuClose}
              >
                <MenuItem onClick={() => this.handleSort(false)}>Sort by Count</MenuItem>
                <MenuItem onClick={() => this.handleSort(true)}>Sort Alphabetically</MenuItem>
              </Menu>
            </div>
          }
          filterLabel="Instrument"
          showSearch={false}
          react={this.props.react}
          URLParams={true}
          sortBy={sortAlphabetically ? 'asc': 'count'}
        />
      </>
    );

[dev188007]

I've met a familiar issue last month. I can help you if you give me more details. I'm looking forward your reply.

[furkanayilmaz]

What info do you need or you can tell me what you did to solve it.

Thanks

[dev188007]

I am sorry for the delayed answer. At that time, I solved the issue by following https://stackoverflow.com/questions/69723330/react-table-multisort-does-not-work-when-providing-a-custom-sort-function . If you need any help, plz feel free to contact me. Hope your success.

[furkanayilmaz]

Hey @dev188007

I just had time to look at the StackOverFlow and it seems like the question is related to TanStack's table repository. Do you know another StackOverFlow by any chance for MultiList but for ReactiveSearch?

Thanks!

[dev188007]

ofc. Please have a look about this. https://stackoverflow.com/questions/51041435/multilist-multidropdownlist-not-showing-or-throwing-errors-in-react. Always welcome to u. Good luck.