Don't assume <Tab /> components are available when setting the next…

… index (#2642) * only set the next index when tabs are available Currently we were assuming that the `tabs` were always there, but this * update changelog
tailwindlabs · Aug 3, 2023 · c22a8c1 · c22a8c1 · vercel · Aug 3, 2023
1 parent 6f9de89
commit c22a8c1
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use correct value when resetting `<Listbox multiple>` and `<Combobox multiple>` ([#2626](https://github.com/tailwindlabs/headlessui/pull/2626))
 - Render `<MainTreeNode />` in `Popover.Group` component only ([#2634](https://github.com/tailwindlabs/headlessui/pull/2634))
 - Disable smooth scrolling when opening/closing `Dialog` components on iOS ([#2635](https://github.com/tailwindlabs/headlessui/pull/2635))
+- Don't assume `<Tab />` components are available when setting the next index ([#2642](https://github.com/tailwindlabs/headlessui/pull/2642))
 
 ## [1.7.16] - 2023-07-27
 

diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -114,12 +114,14 @@ let reducers: {
         return nextState
       }
 
+      let nextSelectedIndex = match(direction, {
+        [Direction.Forwards]: () => tabs.indexOf(focusableTabs[0]),
+        [Direction.Backwards]: () => tabs.indexOf(focusableTabs[focusableTabs.length - 1]),
+      })
+
       return {
         ...nextState,
-        selectedIndex: match(direction, {
-          [Direction.Forwards]: () => tabs.indexOf(focusableTabs[0]),
-          [Direction.Backwards]: () => tabs.indexOf(focusableTabs[focusableTabs.length - 1]),
-        }),
+        selectedIndex: nextSelectedIndex === -1 ? state.selectedIndex : nextSelectedIndex,
       }
     }
 

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use correct value when resetting `<Listbox multiple>` and `<Combobox multiple>` ([#2626](https://github.com/tailwindlabs/headlessui/pull/2626))
 - Render `<MainTreeNode />` in `PopoverGroup` component only ([#2634](https://github.com/tailwindlabs/headlessui/pull/2634))
 - Disable smooth scrolling when opening/closing `Dialog` components on iOS ([#2635](https://github.com/tailwindlabs/headlessui/pull/2635))
+- Don't assume `<Tab />` components are available when setting the next index ([#2642](https://github.com/tailwindlabs/headlessui/pull/2642))
 
 ## [1.7.15] - 2023-07-27
 

diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
@@ -130,10 +130,13 @@ export let TabGroup = defineComponent({
           }
         )
 
-        selectedIndex.value = match(direction, {
+        let nextSelectedIndex = match(direction, {
           [Direction.Forwards]: () => tabs.indexOf(focusableTabs[0]),
           [Direction.Backwards]: () => tabs.indexOf(focusableTabs[focusableTabs.length - 1]),
         })
+        if (nextSelectedIndex !== -1) {
+          selectedIndex.value = nextSelectedIndex
+        }
         api.tabs.value = tabs
         api.panels.value = panels
       }