Instant menu closure

[alekseykurylev]

How can I instantly close the drop-down menu if I hover over the adjacent menu, provided that I use the hideTimeout option?

<Menubar>
	<MenuProvider hideTimeout={250}>
		<MenuButton showOnHover>Item menu</MenuButton>
		<Menu hideOnHoverOutside portal unmountOnHide>
			<MenuItem focusOnHover={false}>Undo</MenuItem>
			<MenuItem focusOnHover={false}>Redo</MenuItem>
		</Menu>
	</MenuProvider>
	<MenuProvider hideTimeout={250}>
		<MenuButton showOnHover>Item menu</MenuButton>
		<Menu hideOnHoverOutside portal unmountOnHide>
			<MenuItem focusOnHover={false}>Undo</MenuItem>
			<MenuItem focusOnHover={false}>Redo</MenuItem>
		</Menu>
	</MenuProvider>
</Menubar>

hideTimeout.mov

[diegohaz]

The ideal solution depends on your concrete use case, but generally you can control the open menu with a single state:

const [menu, setMenu] = useState("");

const isOpen = (label) => menu === label;

const setOpen = (label) => (open) => {
  if (open) {
    setMenu(label);
  } else if (label === menu) {
    setMenu("");
  }
};

<Menubar>
  <MenuProvider
    open={isOpen("first")}
    setOpen={setOpen("first")}
    hideTimeout={250}
  >
    <MenuButton showOnHover>Item menu</MenuButton>
    <Menu hideOnHoverOutside portal unmountOnHide>
      <MenuItem focusOnHover={false}>Undo</MenuItem>
      <MenuItem focusOnHover={false}>Redo</MenuItem>
    </Menu>
  </MenuProvider>
  <MenuProvider
    open={isOpen("second")}
    setOpen={setOpen("second")}
    hideTimeout={250}
  >
    <MenuButton showOnHover>Item menu</MenuButton>
    <Menu hideOnHoverOutside portal unmountOnHide>
      <MenuItem focusOnHover={false}>Undo</MenuItem>
      <MenuItem focusOnHover={false}>Redo</MenuItem>
    </Menu>
  </MenuProvider>
</Menubar>

[alekseykurylev]

thanks