fix(components): allow user to hide menu when clicking outside

Cuong Le · Cuong Le · commit fb1c4cf4d9a2 · 2023-11-04T12:34:41.000+07:00
when user sets `menu-trigger` to `click` and then clicking outside, it should be close menu closed #14738
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "cSpell.words": ["Element Plus", "element-plus"],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "npm.packageManager": "pnpm",
   "eslint.probe": [
     "javascript",
diff --git a/packages/components/menu/src/sub-menu.ts b/packages/components/menu/src/sub-menu.ts
@@ -14,7 +14,7 @@ import {
   watch,
   withDirectives,
 } from 'vue'
-import { useTimeoutFn } from '@vueuse/core'
+import { onClickOutside, useTimeoutFn } from '@vueuse/core'
 import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElTooltip from '@element-plus/components/tooltip'
 import {
@@ -235,6 +235,7 @@ export default defineComponent({
         (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical') ||
         props.disabled
       ) {
+        subMenu.mouseInChild.value = true
         return
       }
       subMenu.mouseInChild.value = true
@@ -255,6 +256,7 @@ export default defineComponent({
           rootMenu.props.mode === 'horizontal') ||
         (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical')
       ) {
+        subMenu.mouseInChild.value = false
         return
       }
       timeout?.()
@@ -311,6 +313,14 @@ export default defineComponent({
       rootMenu.removeSubMenu(item)
     })
 
+    onClickOutside(
+      computed(() => vPopper.value),
+      () => {
+        if (!mouseInChild.value && !subMenu.mouseInChild.value)
+          rootMenu.closeMenu(props.index, indexPath.value)
+      }
+    )
+
     return () => {
       const titleTag: VNodeArrayChildren = [
         slots.title?.(),

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"cSpell.words": ["Element Plus", "element-plus"],`
`3`	`3`	`"typescript.tsdk": "node_modules/typescript/lib",`
`4`		`- "editor.formatOnSave": true,`
	`4`	`+ "editor.formatOnSave": false,`
`5`	`5`	`"npm.packageManager": "pnpm",`
`6`	`6`	`"eslint.probe": [`
`7`	`7`	`"javascript",`