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