#Touchpad/Trackpad click(tap) doesnot work in Menu where a second Menu is rendered inside <Menu.Item>

3 messages · Page 1 of 1 (latest)

frozen monolith
# 
function NestedMenu() {
  const handleOnClick = (e) => console.log(e);
  return (
    <Menu width={200}>
      <Menu.Target>
        <Button>Open menu</Button>
      </Menu.Target>
      <Menu.Dropdown>
        <Menu.Item onClick={handleOnClick}>Settings</Menu.Item>
        <Menu.Item onClick={handleOnClick}>Messages</Menu.Item>
        <Menu.Item>
          <Menu width={200} trigger="hover">
            <Menu.Target>
              <Button>Menu In Menu Item</Button>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item onClick={handleOnClick}>Child 1</Menu.Item>
              <Menu.Item onClick={handleOnClick}>Child 2</Menu.Item>
            </Menu.Dropdown>
          </Menu>
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}

In the above code the onClick events for Child 1 or Child 2 doesnt fire when we use touchpad clicks on the laptop. But using primary click button of mouse it works. Is there a workaround for this. I have type='hover' for the menu item

frozen monolith
gloomy sage