Submenu: fix prop append-to-body . #16289

packages/menu/src/submenu.vue

@@ -196,8 +196,12 @@
         this.timeout = setTimeout(() => {
           this.rootMenu.openMenu(this.index, this.indexPath);
         }, showTimeout);
+
+        if (this.appendToBody) {
+          this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter'));
+        }
       },
-      handleMouseleave() {
+      handleMouseleave(deepDispatch = false) {
         const {rootMenu} = this;
         if (
           (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
@@ -208,11 +212,14 @@
         this.dispatch('ElSubmenu', 'mouse-leave-child');
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
-          if (this.appendToBody) {
-            this.rootMenu.openedMenus = [];
-          }
           !this.mouseInChild && this.rootMenu.closeMenu(this.index);
         }, this.hideTimeout);
+
+        if (this.appendToBody && deepDispatch) {
+          if (this.$parent.$options.name === 'ElSubmenu') {
+            this.$parent.handleMouseleave(true);
+          }
+        }
       },
       handleTitleMouseenter() {
         if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
@@ -279,7 +286,7 @@
             v-show={opened}
             class={[`el-menu--${mode}`, popperClass]}
             on-mouseenter={($event) => this.handleMouseenter($event, 100)}
-            on-mouseleave={this.handleMouseleave}
+            on-mouseleave={() => this.handleMouseleave(true)}
             on-focus={($event) => this.handleMouseenter($event, 100)}>
             <ul
               role="menu"
@@ -320,7 +327,7 @@
           aria-haspopup="true"
           aria-expanded={opened}
           on-mouseenter={this.handleMouseenter}
-          on-mouseleave={this.handleMouseleave}
+          on-mouseleave={() => this.handleMouseleave(false)}
           on-focus={this.handleMouseenter}
         >
           <div