How can I prevent Material-ui Popover from closing

Viewed 125

How can I prevent the 'popover' from closing when either the '_addFilter' or '_removeFilter'
functions are running.

_addFilter = > Adds objects to the 'filters' list

_removeFilter => Deletes an object from the 'filterlist' object

When the 'state' changes the 'popover' shuts down. How do I block.

Popover Component

  const [anchorEl, setAnchorEl] = useState(null);
  const buttonRef = React.useRef();
  const {  filters } = useSelector((state) => state.TableReducer);

  
  const _handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const _handleClose = () => {
    setAnchorEl(null);
  };

  const _addFilter = () => {
    dispatcher({ type: TABLE_FILTER_ADD });
  };

  const _removeFilter = () => {
    dispatcher({ type: TABLE_FILTER_REMOVE });
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

return (

<Popover
    id={id}
    open={open}
    anchorEl={anchorEl}
    onClose={_handleClose}
    elevation={10}
    PaperProps={{ className: classes.popoverPaperProps, }}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}
  >

      {
        filters?.map((item) => (
          <Item
            data={item}
            key={item.key}
          />
        ))
      }          

      <div className={classes.action}>
        <div>
          <Button 
            color="primary" 
            className={classes.addButton}
            startIcon={<AddIcon />}
            onClick={_addFilter}
          >
            Add

          </Button>

          <Button 
            color="primary" 
            className={classes.removeButton}
            startIcon={<ClearIcon />}
            onClick={_removeFilter}
          >
            Remove

          </Button>
        </div>

      </div>

  </Popover>
)

Versions: "@material-ui/core": "^4.11.4", "react": "17.0.2",

Thanks for your help

0 Answers
Related