fix(ktabs): disabled item remove pointer events none [KHCP-11265] (#2103

) * fix(ktabs): disabled item remove pointer events none [KHCP-11265] * test(ktabs): add disabled item test [KHCP-11265]
Kong · Jun 3, 2024 · b140765 · b140765
1 parent c32bb04
commit b140765
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/sandbox/pages/SandboxTabs.vue b/sandbox/pages/SandboxTabs.vue
@@ -92,6 +92,11 @@
               3
             </KBadge>
           </template>
+          <template #disabled-anchor>
+            <KTooltip text="This tab item is disabled.">
+              <div>Disabled</div>
+            </KTooltip>
+          </template>
 
           <template #tab1>
             Tab 1 content

diff --git a/src/components/KTabs/KTabs.cy.ts b/src/components/KTabs/KTabs.cy.ts
@@ -74,6 +74,27 @@ describe('KTabs', () => {
     })
   })
 
+  // handles disabled item correctly
+
+  it('disables the tab item when `disabled` is true', () => {
+    const tabs = [
+      { hash: '#pictures', title: 'Pictures' },
+      { hash: '#movies', title: 'Movies', disabled: true },
+      { hash: '#books', title: 'Books' },
+    ]
+
+    mount(KTabs, {
+      props: {
+        tabs,
+      },
+    })
+
+    cy.get('.tab-item .tab-link').eq(1).should('have.class', 'disabled')
+    cy.get('.tab-item').eq(1).click().then(() => {
+      cy.wrap(Cypress.vueWrapper.emitted()).should('not.have.property', 'change')
+    })
+  })
+
   describe('slots', () => {
     it('provides the #hash slot content', () => {
       const picturesSlot = 'I love pictures'

diff --git a/src/components/KTabs/KTabs.vue b/src/components/KTabs/KTabs.vue
@@ -9,18 +9,18 @@
         :id="`${tab.hash.replace('#','')}-tab`"
         :key="tab.hash"
         class="tab-item"
-        :class="{ active: activeTab === tab.hash, disabled: tab.disabled }"
+        :class="{ active: activeTab === tab.hash }"
       >
         <div
           :aria-controls="hidePanels ? undefined : `panel-${tab.hash}`"
           :aria-selected="hidePanels ? undefined : (activeTab === tab.hash ? 'true' : 'false')"
           class="tab-link"
-          :class="{ 'has-panels': !hidePanels }"
+          :class="{ 'has-panels': !hidePanels, disabled: tab.disabled }"
           role="tab"
           :tabindex="tab.disabled ? '-1' : '0'"
-          @click.prevent="handleTabChange(tab.hash)"
-          @keydown.enter.prevent="handleTabChange(tab.hash)"
-          @keydown.space.prevent="handleTabChange(tab.hash)"
+          @click.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
+          @keydown.enter.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
+          @keydown.space.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
         >
           <slot :name="`${tab.hash.replace('#','')}-anchor`">
             <span>{{ tab.title }}</span>
@@ -155,6 +155,11 @@ watch(() => props.modelValue, (newTabHash) => {
           color: var(--kui-color-text, $kui-color-text);
           outline: none;
         }
+
+        &.disabled {
+          color: var(--kui-color-text-disabled, $kui-color-text-disabled);
+          cursor: not-allowed;
+        }
       }
 
       &.active {
@@ -164,15 +169,6 @@ watch(() => props.modelValue, (newTabHash) => {
           color: var(--kui-color-text, $kui-color-text);
         }
       }
-
-      &.disabled {
-        cursor: not-allowed;
-
-        .tab-link {
-          color: var(--kui-color-text-disabled, $kui-color-text-disabled);
-          pointer-events: none;
-        }
-      }
     }
   }
 }