When set LayoutSider collpased true, by default, all menus are displayed when opened

[chenweiyi]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.1

Environment

MacOS 11.7.4 ; Microsoft Edges 116.0.1938.69 (正式版本) (x86_64); vue 3.3.4

Reproduction link

Steps to reproduce

1. open url
2. You can see the following results:

What is expected?

all menus hide when opened

What is actually happening?

all menus show when opened

[cc-hearts]

This line of code causes it: const openKeys = ref(["manage-rule", "assets-query"]);

You set the openKey so that all of them are expanded

[aibayanyu20]

When setting collpased to true, you should give the menu's openKeys property an empty array.

[chenweiyi]

I know, thank you.

[kaokei]

@cc-hearts @aibayanyu20

I'm facing the same issue here. I also understand that the root cause of the problem lies in setting openKeys during page load.

However, the effect I desire is to have all menu items expanded by default when the page loads. Currently, it seems there is no corresponding prop, such as open-all-items, to achieve this.

So, I iterated through all the menu data and generated an array of openKeys. This works as intended when the left menu is not collapsed. However, if the left menu is initially collapsed, the issue described arises – all submenu pop-ups are displayed by default.

Now the problem is, if I set openKeys to an empty array, it doesn't fulfill my requirements:

If the left menu is expanded, the page won't display all menu items on load, and all top-level menus remain collapsed. If the left menu is collapsed, there are no submenu pop-ups. But if I manually click the trigger button to expand the left menu, all top-level menus remain collapsed, which doesn't meet the requirements. In essence, my fundamental requirement is to have all menu items expanded by default.

Is there currently a preferable solution to achieve this?

---

我这边也遇到同样的问题。我也知道问题的原因是页面加载时设置了openKeys导致的。

但是我想要的效果是页面加载时，默认展开所有的菜单项，目前好像没有对应的props可以实现，比如open-all-items这样的属性。

所以我就遍历了所有的菜单数据，然后生成了一个openKeys数组。这在左侧菜单栏没有收起时是符合要求的。但是如果左侧菜单栏默认是收起的，就会出现这个issue所说的问题，默认显示了所有子菜单弹出框。

现在的问题是如果我设置openKeys为空数组，那么就不能满足我的需求：

1. 如果左侧菜单栏是展开的，页面加载时就不会显示所有菜单项，所有一级菜单都是收起状态。
2. 如果左侧菜单栏时收起的，此时却是没有子菜单的弹出框，但是如果此时手动点击trigger按钮，把左侧菜单栏展开来，此时所有的一级菜单还是收起的，不符合需求。

其实我的根本需求就是想要默认展开所有的菜单项。

请问目前有没有比较好的实现方案呢？

[aibayanyu20]

并不是说让你清空openKeys，而是去判断是否收起了，收起了给个空数组，openKeys并不需要清空

[kaokei]

@aibayanyu20 这里有个前提是openKeys数组后续都是自己在维护吧，实际上我并不想一直维护这个数组，而是依赖a-menu的双向绑定，这个时候好像不能动态赋值空数组吧？

不过按照你的思路，确实可以不使用v-model:openKeys，而是自己来实现这个逻辑，然后动态赋值空数组，确实是一个办法。

不知道你们这边能不能优化一下这块的逻辑呢？ 问题在于如果我的左边侧边栏在页面加载时是展开的，那么所有二级菜单也都是正常打开的，这是符合预期的。而且这个时候点击trigger按钮，收起左边侧边栏，左边侧边栏只会展示一级菜单的图标，并且这个时候没有展示二级菜单的弹出框。注意到这个时候openKeys数组不为空，是有数据的。这个现象对比与页面加载时openKeys有数据且左边侧边栏收起时，会显示二级菜单弹出框。同样是收起左边侧边栏，且openKeys数组有数据，但是现象是不一致的，区别在于是不是页面加载时还是后续点击trigger按钮。 所以我个人理解如果你们可以解决这个不一致的问题，我就不需要自己来实现v-model:openKeys的逻辑了。

如果有理解不正确的地方，还请指正。

我的代码如下：

<script lang="ts" setup>
import {
  AccountBookOutlined,
  HomeOutlined,
  LaptopOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';

const originalItems = [
  {
    label: 'Home',
    key: '/admin/example',
    icon: HomeOutlined,
  },
  {
    label: 'About Menu',
    key: 'about',
    icon: UserOutlined,
    children: [{ label: 'About', key: '/admin/example/about' }],
  },
  {
    label: 'Download Menu',
    key: 'download',
    icon: LaptopOutlined,
    children: [{ label: 'Download', key: '/admin/example/download' }],
  },
  {
    label: 'List',
    key: 'list',
    icon: AccountBookOutlined,
    children: [{ label: 'Leads List 1', key: '/admin/example/list' }],
  },
];

const { items, openKeys, selectedKeys } = useMenu(originalItems);
</script>

<template>
  <a-menu
    v-model:openKeys="openKeys"
    :selectedKeys="selectedKeys"
    :items="items"
    mode="inline"
  >
  </a-menu>
</template>

[aibayanyu20]

可自行二次封装，目前表现与antd一致，没有计划实现