javascript - How to disable click event for SubMenu in Ant Design? - Stack Overflow

I want to prevent the SubMenu from opening and closing its child menu items when you click on it. Is there a way to do this without setting it to disabled? (Which affects how the button looks) I essentially want the SubMenu to look the same, without toggling functionality of its children.

I want to prevent the SubMenu from opening and closing its child menu items when you click on it. Is there a way to do this without setting it to disabled? (Which affects how the button looks) I essentially want the SubMenu to look the same, without toggling functionality of its children.

• javascript
• reactjs
• antd

Share Improve this question Follow edited Aug 5, 2019 at 15:02 Dennis Vash 54.1k1212 gold badges118118 silver badges132132 bronze badges asked Aug 5, 2019 at 14:05 pizzaepizzae 3,03588 gold badges2929 silver badges4747 bronze badges 1

• Do you mean you want to keep a SubMenu open all the time? – Dennis Vash Commented Aug 5, 2019 at 14:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

To achieve the desired behavior, you need to use bination of openKeys and onOpenChange properties of Menu like so:

const OPEN_KEYS = ['sub1'];

export default function App() {
  const [openKeys, setOpenKeys] = useState(OPEN_KEYS);
  const onOpenChange = openKeys => setOpenKeys([...OPEN_KEYS, ...openKeys]);
  return (
    <FlexBox>
      <Menu
        openKeys={openKeys}
        onOpenChange={onOpenChange}
      >
        ...
      </Menu>
    </FlexBox>
  );
}

In the above example, OPEN_KEYS will always stay open and won't affect its Menu.Item / Menu.ItemGroup children.