fix(layout): 修复因为Sider折叠导致菜单展开状态丢失的bug (#6472)

* 修复因为Sider折叠导致菜单展开状态丢失的bug Sider关闭后（collapsed=true）会将展开的菜单收起，当Sider再次打开时（collapsed=false）会丢失原本的菜单展开状态 * 修复因为Sider折叠导致菜单展开状态丢失的bug Sider关闭后（collapsed=true）会将展开的菜单收起，当Sider再次打开时（collapsed=false）会丢失原本的菜单展开状态 * 修改变量类型修复因为Sider折叠导致菜单展开状态丢失的bug Sider关闭后（collapsed=true）会将展开的菜单收起，当Sider再次打开时（collapsed=false）会丢失原本的菜单展开状态 * tests(layout): 新增修复Sider折叠导致菜单状态丢失的测试用例 --------- Co-authored-by: tchaos <wtao0410@sian.com>
ant-design · Feb 8, 2023 · a10703c · a10703c
1 parent df6d1c4
commit a10703c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx
@@ -552,7 +552,11 @@ const BaseMenu: React.FC<BaseMenuProps & PrivateSiderMenuProps> = (props) => {
         [`${baseClassName}-collapsed`]: props.collapsed,
       })}
       items={menuUtils.getNavMenuItems(finallyData, 0)}
-      onOpenChange={setOpenKeys}
+      onOpenChange={(_openKeys: React.Key[])=> {
+        if (!props.collapsed) {
+          setOpenKeys(_openKeys)
+        }
+      }}
       {...props.menuProps}
     />,
   );

diff --git a/tests/layout/index.test.tsx b/tests/layout/index.test.tsx
@@ -1632,4 +1632,42 @@ describe('BasicLayout', () => {
       'Login',
     );
   });
+
+  it('🥩 siderMenu should restore openKeys when collapsed is false', async () => {
+    const onCollapse = jest.fn();
+    const html = render(
+      <ProLayout
+        {...bigDefaultProps}
+        location={{ pathname: '/list/sub-page/sub-sub-page1' }}
+        onCollapse={onCollapse}
+        defaultCollapsed={false}
+      >
+        <div>Hello World</div>
+      </ProLayout>,
+    );
+    await waitForComponentToPaint(html, 1000);
+
+    expect(html.baseElement.querySelectorAll('li.ant-menu-submenu-open').length).toBe(2);
+
+    act(() => {
+      Array.from(
+        html.baseElement.querySelectorAll<HTMLDivElement>('div.ant-pro-sider-collapsed-button'),
+      ).map((item) => item?.click());
+    });
+
+    await waitForComponentToPaint(html, 1000);
+
+    expect(html.baseElement.querySelectorAll('li.ant-menu-submenu-open').length).toBe(0);
+
+    act(() => {
+      Array.from(
+        html.baseElement.querySelectorAll<HTMLDivElement>('div.ant-pro-sider-collapsed-button'),
+      ).map((item) => item?.click());
+    });
+
+    await waitForComponentToPaint(html, 1000);
+
+    expect(onCollapse).toBeCalledTimes(2);
+    expect(html.baseElement.querySelectorAll('li.ant-menu-submenu-open').length).toBe(2);
+  });
 });