fix(comp:menu): remove stopPropagation (#799)

IDuxFE · Mar 12, 2022 · fedf778 · fedf778
1 parent 57e88f0
commit fedf778
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>