From c22a8c19c34efbb1888f0a0acbb209d6f1829e09 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 3 Aug 2023 12:02:17 +0200 Subject: [PATCH] Don't assume `` 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 --- packages/@headlessui-react/CHANGELOG.md | 1 + .../@headlessui-react/src/components/tabs/tabs.tsx | 10 ++++++---- packages/@headlessui-vue/CHANGELOG.md | 1 + packages/@headlessui-vue/src/components/tabs/tabs.ts | 5 ++++- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 1e32769..09d2909 100644 --- 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 `` and `` ([#2626](https://github.com/tailwindlabs/headlessui/pull/2626)) - Render `` 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 `` 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 index 2197656..15f554c 100644 --- 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 index 50b50b4..ae8176b 100644 --- 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 `` and `` ([#2626](https://github.com/tailwindlabs/headlessui/pull/2626)) - Render `` 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 `` 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 index a33b991..a12afc5 100644 --- 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 }