React Select MUI Onclose event not getting triggered for multiple selection from dropdown

Question

After selecting mutilple values from dropdown and click outside, the dropdown is getting closed but onClose event is not getting triggered. I need to filter data based on the selection from drop down.

For example, from below image I need to show data only for batch 1 and batch 2. However, as Onclose is not getting triggered from Select MUI, my code is not getting executed inside handleClose.

Any help is greatly appreciated.

(https://i.stack.imgur.com/wu1vU.png)

Here is the code snippet

import React from 'react';
import PropTypes from 'prop-types';
import Input, { InputLabel } from 'material-ui/Input';
import MenuItem from '@material-ui/core/MenuItem';
import Chip from '@material-ui/core/Chip';
import FormControl from "@material-ui/core/FormControl";
import Select from '@material-ui/core/Select';
import { withStyles } from 'material-ui/styles';
import {multiSelectorStyles} from '../../componentStyles';
import Checkbox from '@material-ui/core/Checkbox';



class MultiSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      selectedItems : [],
    };
  }

  handleChange(event) {
    this.props.onChange(event.target.value);
  }

  handleSelectedItems = (event) => {
    const {
      target: { value },
    } = event;
    this.setState({
      selectedItems: typeof value === 'string' ? value.split(',') : value,
    })

  };

  handleClose = () => {
     console.log("--Onclose event triggered---");
    //const { selectedItems} = this.state;
    //const { pendingKey } = this.props;
    //this.props.applyFilter(selectedItems, pendingKey)
  };

  render() {
    const { selectedItems} = this.state;
    const options =this.props.suggestions.map((suggestion,index) => (
      <option key={index} value={suggestion.key || suggestion}>{suggestion.name || suggestion}</option>
    ));

    return (
      this.props.useInputDataList ?
        <span>
          <input
            list="datalist"
            value={this.props.value}
            onChange={(event) => this.handleChange(event)}/>
          <datalist id="datalist">{options}</datalist>
        </span>
        :
        <span>{this.props.selectorLabel}
          <FormControl>
            <Select
              multiple
              value={selectedItems}
              onChange={(event) => this.handleSelectedItems(event)}
              onClose= {this.handleClose}
              input={<Input />}
              renderValue={selected => (
                <div style={{overflow: 'scroll'}}>
                  {selected.map(value => (
                    <Chip key={value} label={value} />
                  ))}
                </div>
              )}
            >
              {this.props.suggestions.map((suggestion,index) => (
                <MenuItem key={index} value={suggestion.key || suggestion.name}>
                  <Checkbox checked={selectedItems.indexOf(suggestion.key) > -1}/>
                  {suggestion.name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </span>
    );
  }
}

MultiSelector.propTypes = {
  classes: PropTypes.object,
  suggestions: PropTypes.array,
  onChange : PropTypes.func,
  value: PropTypes.array,
  label: PropTypes.string,
  selectorLabel:PropTypes.string,
  useInputDataList: PropTypes.bool,
};


export default (withStyles(multiSelectorStyles)(MultiSelector));

Answer 1

At this stage you can use 'onChange' for filtering. For each onChange your filter will be triggered.

handleSelectedItems = (event) => {
  const { target: { value } } = event;
  this.setState({
    selectedItems: typeof value === 'string' ? value.split(',') : value,
  });

  // Assuming a prop to update data
  // Apply filtering logic here:
  const filteredData = this.props.data.filter(item =>
    this.state.selectedItems.includes(item.batch)
  );
  this.props.updateData(filteredData); 
};

also you can use useEffect by setting up a dependency to trigger the filter.