fix(components): [menu] resize event infinite invoke

[holazz]

closes #9339

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

[pull-request-triage]

👋 @holazz, thank you for contributing element-plus.

• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

Hello @holazz, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=9342
Please comment the example via this playground if needed.

[xiaoxian521]

entries is undefined

[holazz]

entries is undefined

Hi, could you give me a hint on how to reproduce this? BTW this PR isn't ready to be reviewed yet so I need to convert it to draft.

[xiaoxian521]

打印entries

[xiaoxian521]

将下面代码放到play/src/App.vue，运行pnpm dev即可复现

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
    <el-menu-item index="5">Processing Center</el-menu-item>
    <el-menu-item index="6">Processing Center</el-menu-item>
    <el-menu-item index="7">Processing Center</el-menu-item>
    <el-menu-item index="8">Processing Center</el-menu-item>
    <el-menu-item index="9">Processing Center</el-menu-item>
    <el-menu-item index="10">Processing Center</el-menu-item>
    <el-menu-item index="11">Processing Center</el-menu-item>
    <el-menu-item index="12">Processing Center</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.el-menu-demo {
  min-width: 0;
  flex: 1;
}
</style>

[holazz]

将下面代码放到play/src/App.vue，运行pnpm dev即可复现

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
    <el-menu-item index="5">Processing Center</el-menu-item>
    <el-menu-item index="6">Processing Center</el-menu-item>
    <el-menu-item index="7">Processing Center</el-menu-item>
    <el-menu-item index="8">Processing Center</el-menu-item>
    <el-menu-item index="9">Processing Center</el-menu-item>
    <el-menu-item index="10">Processing Center</el-menu-item>
    <el-menu-item index="11">Processing Center</el-menu-item>
    <el-menu-item index="12">Processing Center</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.el-menu-demo {
  min-width: 0;
  flex: 1;
}
</style>

奇怪，我试了好几次也没有出现 entries undefined 的情况 🤔

[xiaoxian521]

但是可以注意到 ... 不见了😂

[holazz]

但是可以注意到 ... 不见了😂

... 在这里，应该还是有些 bug

[xiaoxian521]

Hey, after testing there are two more questions

1. Lost activation effect

2. The ellipsis may not be displayed

[github-actions]

Hello, @, seems like your commit message contains some issues.

你好，@，你的提交消息不符合 Element Plus 的提交消息规范。

⧗   input: Update menu.ts
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

⧗   input: Update menu.ts
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

⧗   input: Update menu.ts
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

Please refer to Commit Example for fixing it.

请参考 提交示例 来修改你的提交消息。

Note that all your commits will be squashed into one for being linted, so you might need to revision your commits.
If you do not know how to do so, please refer to Keeping git commit history clean to update your commit message.

你的所有 commit(s) 会被合并为一个 commit 来被验证，所以你可能需要修改你之前的 commit(s) 消息。
如果你不知道如何来修改之前已经提交的记录，请参考让你的 Git 提交历史保持干净来修改。

If you find it hard to do it by yourself, run command below to use an intuitive tool for that.

如果你觉得自己写这个提交消息很难，请使用下面的命令来启动一个交互式工具来帮助你生成消息。

pnpm cz

Note that if you do not fix the commit message issue, your PR will be automatically closed within 3 days.

请注意，如果你没有按照规范修改你的提交消息，你的 PR 将会在三天内被自动关闭。

_{Generated with ❤️ by ElementPlusBot}

[holazz]

@xiaoxian521 谢谢细心 review，我那个判断条件应该还有点问题，我稍后看一下

[xiaoxian521]

@xiaoxian521 谢谢细心 review，我那个判断条件应该还有点问题，我稍后看一下

好的 如果好了@我一下 我会继续测试😊

[holazz]

@xiaoxian521 谢谢细心 review，我那个判断条件应该还有点问题，我稍后看一下

好的 如果好了@我一下 我会继续测试😊

好的，改好之后我@你

[holazz]

Hi, @xiaoxian521 我觉得可以了，麻烦再审查一下！

[xiaoxian521]

@holazz 干得漂亮❤️