fix(menu): fix submenu parent item active status on mounted (#3675)

* fix(menu): fix submenu parent item active status on mounted

* chore: update snapshot

Author: uyarn

src/menu/__tests__/__snapshots__/submenu.test.jsx.snap

@@ -3,14 +3,22 @@
 exports[`Submenu > props > :disabled 1`] = `
 <li
   class="t-submenu t-is-disabled"
-/>
+>
+  <div
+    style="display: none;"
+  />
+</li>
 `;
 
 exports[`Submenu > props > :name 1`] = `
 <li
   class="t-submenu"
   name="1"
-/>
+>
+  <div
+    style="display: none;"
+  />
+</li>
 `;
 
 exports[`Submenu > slot > <default> 1`] = `
@@ -50,6 +58,11 @@ exports[`Submenu > slot > <default> 1`] = `
       <div />
     </ul>
   </transition-stub>
+  <div
+    style="display: none;"
+  >
+    <div />
+  </div>
 </li>
 `;
 
@@ -73,6 +86,9 @@ exports[`Submenu > slot > <icon> 1`] = `
       style="--padding-left: 44px; display: none;"
     />
   </transition-stub>
+  <div
+    style="display: none;"
+  />
 </li>
 `;
 
@@ -97,5 +113,8 @@ exports[`Submenu > slot > <title> 1`] = `
       style="--padding-left: 44px; display: none;"
     />
   </transition-stub>
+  <div
+    style="display: none;"
+  />
 </li>
 `;

src/menu/menu-item.tsx

@@ -70,7 +70,10 @@ export default defineComponent({
         vnode: ctx.slots.default && ctx.slots.default(),
       });
     });
-
+    const activeValues = menu.activeValues.value;
+    if (activeValues.includes(props.value) && !activeValues.includes(submenu?.value)) {
+      activeValues.push(submenu?.value);
+    }
     return {
       menu,
       active,

src/menu/submenu.tsx

@@ -51,6 +51,7 @@ export default defineComponent({
     const isActive = computed(() => activeValues.value.indexOf(props.value) > -1);
     const popupVisible = ref(false);
     const isCursorInPopup = ref(false);
+
     const rippleColor = computed(() => (theme.value === 'light' ? '#E7E7E7' : '#383838'));
     const isOpen = computed(() => {
       if (mode.value === 'popup') {
@@ -244,6 +245,7 @@ export default defineComponent({
       handleMouseLeavePopup,
       handleSubmenuItemClick,
       classPrefix,
+      activeValues,
     };
   },
   methods: {
@@ -366,6 +368,9 @@ export default defineComponent({
   render() {
     let child = null;
     let events = {};
+    let virtualChild;
+    // popup模式下且存在多层的特殊封装场景中，需要将子节点挂载进行计算高亮
+    if (this.activeValues.length < 2) virtualChild = <div style="display:none">{renderContent(this, 'default', 'content')}</div>;
 
     if (this.mode === 'popup') {
       events = {
@@ -379,6 +384,7 @@ export default defineComponent({
     return (
       <li class={this.classes} {...{ on: events }}>
         {child}
+        {virtualChild}
       </li>
     );
   },