Запретить закрытие меню пользовательского интерфейса, когда выбрана опция

Question

У меня есть компонент меню, созданный с помощью Material UI. Я бы хотел оставить меню открытым в том же положении после того, как внутри этого меню был установлен флажок. Прямо сейчас он закрывает всплывающее окно.

Я пробовал event.stopPropagation () и event.preventDefault () в функции handleChange, которая управляет событием onChange флажка безрезультатно.

Это упрощенное представление моего меню:

      <Menu
        anchorEl={anchorEl}
        id={menuId}
        keepMounted
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
        open={isMenuOpen}
        onClose={handleMenuClose}
        style={{ marginTop: "1.56em" }}
      >
     <FormControl component="fieldset" className={classes.formControl}>
      <FormGroup>
        {checkboxes.map(checkbox => {
          return (
            <FormControlLabel
              key={checkbox.term}
              control={
                <Checkbox
                  checked={checkbox.checked}
                  onChange={handleChange(checkbox.term)}
                  value={checkbox.term}
                  color="primary"
                  className={classes.root}
                />
              }
              label={checkbox.label}
            />
          );
        })}
      </FormGroup>
    </FormControl>
      </Menu>

Функция handleChange:

  const handleChange = value => event => {
    setFilters(rest => {
      return { ...rest, contract: { ...filters.contract, [value]: event.target.checked } };
    });
  };

isMenuOpen относится к:

const [anchorEl, setAnchorEl] = useState(null);
const isMenuOpen = Boolean(anchorEl);

, а handleMenuClose относится к:

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

Выше я говорю упрощенное представление, потому что иерархия моих компонентов фактически такова: | - TopLevelController component (hosts the state for the whole components tree and passes it down; hosts the setFilters function) | -- SearchAndFilter component (hosts my App bar and a bunch of MenuSection components) | --- MenuSection components (hosts the <Menu> component above and a bunch of sub components for each popover) | ---- SubMenu component (hosts the <FormControl> component above) -

Поэтому мне нужно, чтобы компонент SubMenu (popover) оставался открытым послещелчок сделан на флажке, который он держит, но это не происходит как таковое.

Мое лучшее предположение заключается в том, что функция setFilters верхнего уровня выполняет повторную визуализацию всего дерева компонентов и, таким образом, инициализирует состояние anchorEl подкомпонента как нулевое после каждого обновления.

Есть ли способ справиться с этим изящно? Спасибо:)