From fedf778c319a9c69b56b3d7f96c16c55790da35b Mon Sep 17 00:00:00 2001
From: danranVm <danranvm@gmail.com>
Date: Sat, 12 Mar 2022 10:00:28 +0800
Subject: [PATCH] fix(comp:menu): remove stopPropagation (#799)

---
 packages/components/menu/demo/StateSwitching.vue      |  6 +++---
 packages/components/menu/src/contents/MenuItem.tsx    |  1 -
 .../components/menu/src/contents/MenuItemGroup.tsx    |  5 ++---
 .../components/menu/src/contents/menu-sub/Label.tsx   | 11 ++++++++---
 .../components/menu/src/contents/menu-sub/MenuSub.tsx |  9 ++-------
 packages/components/menu/src/token.ts                 |  1 +
 6 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/components/menu/demo/StateSwitching.vue b/packages/components/menu/demo/StateSwitching.vue
index 0de0346f8..ccce265e4 100644
--- a/packages/components/menu/demo/StateSwitching.vue
+++ b/packages/components/menu/demo/StateSwitching.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxRow align="middle" gutter="16">
+  <IxRow align="center" gutter="16">
     <IxCol>
       <IxRadioGroup v-model:value="mode">
         <IxRadio value="vertical">Vertical</IxRadio>
@@ -8,7 +8,7 @@
       </IxRadioGroup>
     </IxCol>
     <IxCol>
-      <IxDivider type="vertical" />
+      <IxDivider vertical />
     </IxCol>
     <IxCol>
       <IxRadioGroup v-model:value="theme">
@@ -17,7 +17,7 @@
       </IxRadioGroup>
     </IxCol>
     <IxCol>
-      <IxDivider type="vertical" />
+      <IxDivider vertical />
     </IxCol>
     <IxCol>
       <IxRadioGroup v-model:value="collapsed">
diff --git a/packages/components/menu/src/contents/MenuItem.tsx b/packages/components/menu/src/contents/MenuItem.tsx
index ea0b4cdb1..e8723f246 100644
--- a/packages/components/menu/src/contents/MenuItem.tsx
+++ b/packages/components/menu/src/contents/MenuItem.tsx
@@ -55,7 +55,6 @@ export default defineComponent({
     })
 
     const onClick = (evt: Event) => {
-      evt.stopPropagation()
       handleSelected(key)
       handleClick(key, 'item', evt)
       menuSubContext?.handleItemClick()
diff --git a/packages/components/menu/src/contents/MenuItemGroup.tsx b/packages/components/menu/src/contents/MenuItemGroup.tsx
index 7aa3ec521..8f6d68f4b 100644
--- a/packages/components/menu/src/contents/MenuItemGroup.tsx
+++ b/packages/components/menu/src/contents/MenuItemGroup.tsx
@@ -36,7 +36,6 @@ export default defineComponent({
     const labelStyle = computed(() => ({ paddingLeft: paddingLeft.value }))
 
     const onClick = (evt: Event) => {
-      evt.stopPropagation()
       handleClick(key, 'itemGroup', evt)
     }
 
@@ -59,8 +58,8 @@ export default defineComponent({
 
       const prefixCls = `${mergedPrefixCls.value}-item-group`
       return (
-        <li class={prefixCls} {...additional} onClick={onClick}>
-          <div class={`${prefixCls}-label`} style={labelStyle.value}>
+        <li class={prefixCls} {...additional}>
+          <div class={`${prefixCls}-label`} style={labelStyle.value} onClick={onClick}>
             {iconNode}
             <span>{labelNode}</span>
           </div>
diff --git a/packages/components/menu/src/contents/menu-sub/Label.tsx b/packages/components/menu/src/contents/menu-sub/Label.tsx
index 002ec0789..6262d55ab 100644
--- a/packages/components/menu/src/contents/menu-sub/Label.tsx
+++ b/packages/components/menu/src/contents/menu-sub/Label.tsx
@@ -17,8 +17,9 @@ import { coverIcon } from '../Utils'
 export default defineComponent({
   name: 'MenuSubLabel',
   setup() {
-    const { slots: menuSlots, config, mergedPrefixCls } = inject(menuToken)!
-    const { props, isExpanded, isSelected, changeExpanded, handleMouseEvent, mode, paddingLeft } = inject(menuSubToken)!
+    const { slots: menuSlots, config, mergedPrefixCls, handleClick } = inject(menuToken)!
+    const { props, key, isExpanded, isSelected, changeExpanded, handleMouseEvent, mode, paddingLeft } =
+      inject(menuSubToken)!
 
     const suffix = computed(() => props.data.suffix ?? config.suffix)
     const rotate = computed(() => {
@@ -34,10 +35,14 @@ export default defineComponent({
       }
       if (mode.value === 'inline') {
         return {
-          onClick: () => changeExpanded(!isExpanded.value),
+          onClick: (evt: MouseEvent) => {
+            handleClick(key, 'sub', evt)
+            changeExpanded(!isExpanded.value)
+          },
         }
       } else {
         return {
+          onClick: (evt: MouseEvent) => handleClick(key, 'sub', evt),
           onMouseenter: () => handleMouseEvent(true),
           onMouseleave: () => handleMouseEvent(false),
         }
diff --git a/packages/components/menu/src/contents/menu-sub/MenuSub.tsx b/packages/components/menu/src/contents/menu-sub/MenuSub.tsx
index 53caea1ae..7fe89be3f 100644
--- a/packages/components/menu/src/contents/menu-sub/MenuSub.tsx
+++ b/packages/components/menu/src/contents/menu-sub/MenuSub.tsx
@@ -50,7 +50,6 @@ export default defineComponent({
       selectedKeys,
       expandedKeys,
       handleExpand,
-      handleClick,
     } = inject(menuToken)!
     const menuSubContext = inject(menuSubToken, null)
     const menuItemGroupContext = inject(menuItemGroupToken, false)
@@ -71,6 +70,7 @@ export default defineComponent({
 
     provide(menuSubToken, {
       props,
+      key,
       isExpanded,
       isSelected,
       mode,
@@ -104,11 +104,6 @@ export default defineComponent({
 
     const offset = computed(() => props.data.offset ?? config.offset)
 
-    const onClick = (evt: Event) => {
-      evt.stopPropagation()
-      handleClick(key, 'sub', evt)
-    }
-
     return () => {
       const { additional, disabled } = props.data
       let children: VNodeTypes
@@ -135,7 +130,7 @@ export default defineComponent({
         )
       }
       return (
-        <li class={classes.value} {...additional} onClick={disabled ? undefined : onClick}>
+        <li class={classes.value} {...additional}>
           {children}
         </li>
       )
diff --git a/packages/components/menu/src/token.ts b/packages/components/menu/src/token.ts
index fc5cde986..20b3998d5 100644
--- a/packages/components/menu/src/token.ts
+++ b/packages/components/menu/src/token.ts
@@ -28,6 +28,7 @@ export const menuToken: InjectionKey<MenuContext> = Symbol('menuToken')
 
 export interface MenuSubContext {
   props: { data: MenuSubProps }
+  key: VKey
   isExpanded: ComputedRef<boolean>
   isSelected: ComputedRef<boolean>
   mode: ComputedRef<MenuMode>