fix(VSlideGroup): skip disabled elements when moving focus (#20808)

fixes #20780 Co-authored-by: Kael <[email protected]>
vuetifyjs · Jan 16, 2025 · cb2d96b · cb2d96b
1 parent 2cab7e4
commit cb2d96b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
@@ -279,26 +279,39 @@ export const VSlideGroup = genericComponent<new <T>(
       }
     }
 
+    function getSiblingElement (el: HTMLElement | null, location: 'next' | 'prev') {
+      if (!el) return undefined
+      let sibling: HTMLElement | null = el
+      do {
+        sibling = sibling?.[location === 'next' ? 'nextElementSibling' : 'previousElementSibling'] as HTMLElement | null
+      } while (sibling?.hasAttribute('disabled'))
+      return sibling
+    }
+
     function focus (location?: 'next' | 'prev' | 'first' | 'last') {
       if (!contentRef.el) return
 
-      let el: HTMLElement | undefined
+      let el: HTMLElement | null | undefined
 
       if (!location) {
         const focusable = focusableChildren(contentRef.el)
         el = focusable[0]
       } else if (location === 'next') {
-        el = contentRef.el.querySelector(':focus')?.nextElementSibling as HTMLElement | undefined
+        el = getSiblingElement(contentRef.el.querySelector(':focus'), location)
 
         if (!el) return focus('first')
       } else if (location === 'prev') {
-        el = contentRef.el.querySelector(':focus')?.previousElementSibling as HTMLElement | undefined
+        el = getSiblingElement(contentRef.el.querySelector(':focus'), location)
 
         if (!el) return focus('last')
       } else if (location === 'first') {
         el = (contentRef.el.firstElementChild as HTMLElement)
+
+        if (el?.hasAttribute('disabled')) el = getSiblingElement(el, 'next')
       } else if (location === 'last') {
         el = (contentRef.el.lastElementChild as HTMLElement)
+
+        if (el?.hasAttribute('disabled')) el = getSiblingElement(el, 'prev')
       }
 
       if (el) {

diff --git a/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
@@ -8,6 +8,7 @@ import { VCard } from '@/components/VCard'
 
 // Utilities
 import { createRange } from '@/util'
+import { VBtn } from '../../VBtn'
 
 describe('VSlideGroup', () => {
   it('should support default scoped slot with selection', () => {
@@ -252,4 +253,24 @@ describe('VSlideGroup', () => {
 
     cy.get('.item-7').should('exist').should('be.visible')
   })
+
+  it('Skip disabled elements when moving focus', () => {
+    cy.mount(() => (
+      <Application>
+        <VSlideGroup selectedClass="bg-primary">
+          { createRange(5).map(i => (
+            <VSlideGroupItem key={ i }>
+              <VBtn class={[`btn${i}`]} disabled={ i === 2 || i === 3 }>{ i }</VBtn>
+            </VSlideGroupItem>
+          ))}
+        </VSlideGroup>
+      </Application>
+    ))
+
+    cy.get('.btn0').focus().type('{rightArrow}{rightArrow}')
+    cy.focused().should('have.class', 'btn4')
+
+    cy.focused().type('{leftArrow}')
+    cy.focused().should('have.class', 'btn1')
+  })
 })