From fab03006e81e0e323b77c4610dcd331edafc7eb2 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Thu, 6 Jul 2023 14:53:50 +0800
Subject: [PATCH] fix: menu item click area (#3051)

---
 .../app-sidebar/menu-item/index.css.ts           |  4 ++++
 .../components/app-sidebar/menu-item/index.tsx   | 16 +++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/component/src/components/app-sidebar/menu-item/index.css.ts b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
index 3b213659b3..6fbf1a2655 100644
--- a/packages/component/src/components/app-sidebar/menu-item/index.css.ts
+++ b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
@@ -44,6 +44,10 @@ export const content = style({
   flex: 1,
 });
 
+export const postfix = style({
+  justifySelf: 'flex-end',
+});
+
 export const icon = style({
   color: 'var(--affine-icon-color)',
   fontSize: '20px',
diff --git a/packages/component/src/components/app-sidebar/menu-item/index.tsx b/packages/component/src/components/app-sidebar/menu-item/index.tsx
index 7ffe5d8bf8..de63fd5679 100644
--- a/packages/component/src/components/app-sidebar/menu-item/index.tsx
+++ b/packages/component/src/components/app-sidebar/menu-item/index.tsx
@@ -19,6 +19,10 @@ export interface MenuLinkItemProps
   extends MenuItemProps,
     Pick<LinkProps, 'href'> {}
 
+const stopPropagation: React.MouseEventHandler = e => {
+  e.stopPropagation();
+};
+
 export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
   (
     {
@@ -44,6 +48,7 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
       <div
         ref={ref}
         {...props}
+        onClick={onClick}
         className={clsx([styles.root, props.className])}
         data-active={active}
         data-disabled={disabled}
@@ -69,15 +74,16 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
             )}
             {React.cloneElement(icon, {
               className: clsx([styles.icon, icon.props.className]),
-              onClick: onClick,
             })}
           </div>
         )}
 
-        <div onClick={onClick} className={styles.content}>
-          {children}
-        </div>
-        {postfix}
+        <div className={styles.content}>{children}</div>
+        {postfix ? (
+          <div className={styles.postfix} onClick={stopPropagation}>
+            {postfix}
+          </div>
+        ) : null}
       </div>
     );
   }