Web: SlideTabs, prevent click instead of using pointer-events (#44114)

gravitational · Jul 20, 2024 · fc31399 · fc31399
1 parent bea2d21
commit fc31399
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/web/packages/design/src/SlideTabs/SlideTabs.story.tsx b/web/packages/design/src/SlideTabs/SlideTabs.story.tsx
@@ -81,3 +81,14 @@ export const LoadingTab = () => {
     />
   );
 };
+
+export const DisabledTab = () => {
+  return (
+    <SlideTabs
+      tabs={['aws', 'automatically', 'manually']}
+      onChange={() => null}
+      activeIndex={1}
+      disabled={true}
+    />
+  );
+};
diff --git a/web/packages/design/src/SlideTabs/SlideTabs.tsx b/web/packages/design/src/SlideTabs/SlideTabs.tsx
@@ -36,14 +36,18 @@ export function SlideTabs({
       <TabNav role="tablist" appearance={appearance} size={size}>
         {tabs.map((tabName, tabIndex) => {
           const selected = tabIndex === activeIndex;
+          let onClick;
+          if (!disabled && !isProcessing) {
+            onClick = (e: React.MouseEvent<HTMLLabelElement, MouseEvent>) => {
+              e.preventDefault();
+              onChange(tabIndex);
+            };
+          }
           return (
             <TabLabel
               role="tab"
               htmlFor={`${name}-${tabName}`}
-              onClick={e => {
-                e.preventDefault();
-                onChange(tabIndex);
-              }}
+              onClick={onClick}
               itemCount={tabs.length}
               key={`${tabName}-${tabIndex}`}
               className={tabIndex === activeIndex && 'selected'}
@@ -123,14 +127,13 @@ const TabLabel = styled.label<{
   processing?: boolean;
   disabled?: boolean;
 }>`
-  cursor: pointer;
+  cursor: ${p => (p.processing || p.disabled ? 'default' : 'pointer')};
   display: flex;
   justify-content: center;
   padding: 10px;
   width: ${props => 100 / props.itemCount}%;
   z-index: 1; /* Ensures that the label is above the background slider. */
-  opacity: ${p => (p.processing ? 0.5 : 1)};
-  pointer-events: ${p => (p.processing || p.disabled ? 'none' : 'auto')};
+  opacity: ${p => (p.processing || p.disabled ? 0.5 : 1)};
 `;
 
 const TabInput = styled.input`