From 0a54138db8c83b85f9e60f49b0316d03ecc5791f Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Mon, 19 Dec 2022 18:11:13 +0800
Subject: [PATCH] fix: add pointerEvent to disabled button

---
 .../app/src/components/workspace-slider-bar/style.ts   |  5 ++++-
 packages/app/src/ui/button/styles.ts                   | 10 +++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts
index e32c01e86d..3f8fa216ac 100644
--- a/packages/app/src/components/workspace-slider-bar/style.ts
+++ b/packages/app/src/components/workspace-slider-bar/style.ts
@@ -57,7 +57,10 @@ export const StyledListItem = styled.button<{
     borderRadius: '5px',
     ...displayFlex('flex-start', 'center'),
     ...(disabled
-      ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+      ? {
+          cursor: 'not-allowed',
+          color: theme.colors.borderColor,
+        }
       : {}),
 
     '>svg': {
diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts
index efa6d2edda..106826804b 100644
--- a/packages/app/src/ui/button/styles.ts
+++ b/packages/app/src/ui/button/styles.ts
@@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
       color: theme.colors.iconColor,
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed' } : {}),
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
       transition: 'background .15s',
 
       // TODO: we need to add @emotion/babel-plugin
@@ -123,7 +123,7 @@ export const StyledTextButton = styled('button', {
       paddingRight: padding,
       ...displayInlineFlex('flex-start', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed' } : {}),
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
       transition: 'background .15s',
       // TODO: Implement circle shape
       borderRadius: shape === 'default' ? borderRadius : height / 2,
@@ -180,7 +180,11 @@ export const StyledButton = styled('button', {
       position: 'relative',
       // TODO: disabled color is not decided
       ...(disabled
-        ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+        ? {
+            cursor: 'not-allowed',
+            pointerEvents: 'none',
+            color: theme.colors.borderColor,
+          }
         : {}),
       transition: 'background .15s',
       // TODO: Implement circle shape