fix: !multiple menu should click to close (#396)

* fix: Not click to close it

* test: fix test case

* fix: not trigger if empty

Author: zombieJ

src/Menu.tsx

@@ -224,6 +224,11 @@ const Menu: React.FC<MenuProps> = props => {
     postState: keys => keys || EMPTY_LIST,
   });
 
+  const triggerOpenKeys = (keys: string[]) => {
+    setMergedOpenKeys(keys);
+    onOpenChange?.(keys);
+  };
+
   // >>>>> Cache & Reset open keys when inlineCollapsed changed
   const [inlineCacheOpenKeys, setInlineCacheOpenKeys] =
     React.useState(mergedOpenKeys);
@@ -249,11 +254,8 @@ const Menu: React.FC<MenuProps> = props => {
     if (isInlineMode) {
       setMergedOpenKeys(inlineCacheOpenKeys);
     } else {
-      const empty = [];
-      setMergedOpenKeys(empty);
-
       // Trigger open event in case its in control
-      onOpenChange?.(empty);
+      triggerOpenKeys(EMPTY_LIST);
     }
   }, [isInlineMode]);
 
@@ -338,10 +340,12 @@ const Menu: React.FC<MenuProps> = props => {
     const exist = mergedSelectKeys.includes(targetKey);
     let newSelectKeys: string[];
 
-    if (exist) {
-      newSelectKeys = mergedSelectKeys.filter(key => key !== targetKey);
-    } else if (multiple) {
-      newSelectKeys = [...mergedSelectKeys, targetKey];
+    if (multiple) {
+      if (exist) {
+        newSelectKeys = mergedSelectKeys.filter(key => key !== targetKey);
+      } else {
+        newSelectKeys = [...mergedSelectKeys, targetKey];
+      }
     } else {
       newSelectKeys = [targetKey];
     }
@@ -359,6 +363,10 @@ const Menu: React.FC<MenuProps> = props => {
     } else {
       onSelect?.(selectInfo);
     }
+
+    if (!multiple && mergedOpenKeys.length) {
+      onOpenChange?.(EMPTY_LIST);
+    }
   };
 
   // ========================= Open =========================
@@ -382,8 +390,7 @@ const Menu: React.FC<MenuProps> = props => {
     }
 
     if (!shallowEqual(mergedOpenKeys, newOpenKeys)) {
-      setMergedOpenKeys(newOpenKeys);
-      onOpenChange?.(newOpenKeys);
+      triggerOpenKeys(newOpenKeys);
     }
   });
 

tests/Menu.spec.js

@@ -539,5 +539,32 @@ describe('Menu', () => {
 
     errorSpy.mockRestore();
   });
+
+  it('Click should close Menu', async () => {
+    jest.useFakeTimers();
+
+    const onOpenChange = jest.fn();
+
+    const wrapper = mount(
+      <Menu openKeys={['bamboo']} mode="vertical" onOpenChange={onOpenChange}>
+        <SubMenu key="bamboo" title="Bamboo">
+          <MenuItem key="light">Light</MenuItem>
+        </SubMenu>
+      </Menu>,
+    );
+
+    // Open menu
+    await act(async () => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    wrapper.update();
+
+    wrapper.find('.rc-menu-item').last().simulate('click');
+    expect(onOpenChange).toHaveBeenCalledWith([]);
+
+    jest.useRealTimers();
+  });
 });
 /* eslint-enable */