Improve Tabs wrapping around when controlling the component and ove…

…rflowing the `selectedIndex` (#2213)

* ensure chaning the `selectedIndex` tabs properly wraps around

We never want to use and index that doesn't map to a proper tab.

This commit also makes the implementation similar for both React and
Vue.

* add tests to prove the underflow and overflow wrapping

* drop updating the index manually

This is already adjusted when tabs change internally. You can still
manually change it of course, but for these tests that doesn't matter
and cause different results.

* update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve `Combobox` accessibility ([#2153](https://github.com/tailwindlabs/headlessui/pull/2153))
 - Fix crash when reading `headlessuiFocusGuard` of `relatedTarget` in the `FocusTrap` component ([#2203](https://github.com/tailwindlabs/headlessui/pull/2203))
 - Fix `FocusTrap` in `Dialog` when there is only 1 focusable element ([#2172](https://github.com/tailwindlabs/headlessui/pull/2172))
+- Improve `Tabs` wrapping around when controlling the component and overflowing the `selectedIndex` ([#2213](https://github.com/tailwindlabs/headlessui/pull/2213))
 
 ## [1.7.7] - 2022-12-16
 

packages/@headlessui-react/src/components/tabs/tabs.test.tsx

@@ -179,7 +179,6 @@ describe('Rendering', () => {
             <button
               onClick={() => {
                 setTabs((tabs) => tabs.slice().reverse())
-                setSelectedIndex((idx) => tabs.length - 1 - idx)
               }}
             >
               reverse
@@ -1083,6 +1082,94 @@ describe('Rendering', () => {
         assertActiveElement(getByText('Tab 1'))
       })
     )
+
+    it(
+      'should wrap around when overflowing the index when using a controlled component',
+      suppressConsoleLogs(async () => {
+        function Example() {
+          let [selectedIndex, setSelectedIndex] = useState(0)
+
+          return (
+            <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
+              {({ selectedIndex }) => (
+                <>
+                  <Tab.List>
+                    <Tab>Tab 1</Tab>
+                    <Tab>Tab 2</Tab>
+                    <Tab>Tab 3</Tab>
+                  </Tab.List>
+                  <Tab.Panels>
+                    <Tab.Panel>Content 1</Tab.Panel>
+                    <Tab.Panel>Content 2</Tab.Panel>
+                    <Tab.Panel>Content 3</Tab.Panel>
+                  </Tab.Panels>
+                  <button onClick={() => setSelectedIndex(selectedIndex + 1)}>Next</button>
+                </>
+              )}
+            </Tab.Group>
+          )
+        }
+        render(<Example />)
+
+        assertActiveElement(document.body)
+
+        await click(getByText('Next'))
+        assertTabs({ active: 1 })
+
+        await click(getByText('Next'))
+        assertTabs({ active: 2 })
+
+        await click(getByText('Next'))
+        assertTabs({ active: 0 })
+
+        await click(getByText('Next'))
+        assertTabs({ active: 1 })
+      })
+    )
+
+    it(
+      'should wrap around when underflowing the index when using a controlled component',
+      suppressConsoleLogs(async () => {
+        function Example() {
+          let [selectedIndex, setSelectedIndex] = useState(0)
+
+          return (
+            <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
+              {({ selectedIndex }) => (
+                <>
+                  <Tab.List>
+                    <Tab>Tab 1</Tab>
+                    <Tab>Tab 2</Tab>
+                    <Tab>Tab 3</Tab>
+                  </Tab.List>
+                  <Tab.Panels>
+                    <Tab.Panel>Content 1</Tab.Panel>
+                    <Tab.Panel>Content 2</Tab.Panel>
+                    <Tab.Panel>Content 3</Tab.Panel>
+                  </Tab.Panels>
+                  <button onClick={() => setSelectedIndex(selectedIndex - 1)}>Previous</button>
+                </>
+              )}
+            </Tab.Group>
+          )
+        }
+        render(<Example />)
+
+        assertActiveElement(document.body)
+
+        await click(getByText('Previous'))
+        assertTabs({ active: 2 })
+
+        await click(getByText('Previous'))
+        assertTabs({ active: 1 })
+
+        await click(getByText('Previous'))
+        assertTabs({ active: 0 })
+
+        await click(getByText('Previous'))
+        assertTabs({ active: 2 })
+      })
+    )
   })
 
   describe(`'Tab'`, () => {

packages/@headlessui-react/src/components/tabs/tabs.tsx

@@ -30,6 +30,17 @@ import { microTask } from '../../utils/micro-task'
 import { Hidden } from '../../internal/hidden'
 import { getOwnerDocument } from '../../utils/owner'
 
+enum Direction {
+  Forwards,
+  Backwards,
+}
+
+enum Ordering {
+  Less = -1,
+  Equal = 0,
+  Greater = 1,
+}
+
 interface StateDefinition {
   selectedIndex: number
 
@@ -68,16 +79,30 @@ let reducers: {
 
     let nextState = { ...state, tabs, panels }
 
-    // Underflow
-    if (action.index < 0) {
-      return { ...nextState, selectedIndex: tabs.indexOf(focusableTabs[0]) }
-    }
+    if (
+      // Underflow
+      action.index < 0 ||
+      // Overflow
+      action.index > tabs.length - 1
+    ) {
+      let direction = match(Math.sign(action.index - state.selectedIndex), {
+        [Ordering.Less]: () => Direction.Backwards,
+        [Ordering.Equal]: () => {
+          return match(Math.sign(action.index), {
+            [Ordering.Less]: () => Direction.Forwards,
+            [Ordering.Equal]: () => Direction.Forwards,
+            [Ordering.Greater]: () => Direction.Backwards,
+          })
+        },
+        [Ordering.Greater]: () => Direction.Forwards,
+      })
 
-    // Overflow
-    else if (action.index > tabs.length) {
       return {
         ...nextState,
-        selectedIndex: tabs.indexOf(focusableTabs[focusableTabs.length - 1]),
+        selectedIndex: match(direction, {
+          [Direction.Forwards]: () => tabs.indexOf(focusableTabs[0]),
+          [Direction.Backwards]: () => tabs.indexOf(focusableTabs[focusableTabs.length - 1]),
+        }),
       }
     }
 

packages/@headlessui-vue/CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve `Combobox` accessibility ([#2153](https://github.com/tailwindlabs/headlessui/pull/2153))
 - Fix crash when reading `headlessuiFocusGuard` of `relatedTarget` in the `FocusTrap` component ([#2203](https://github.com/tailwindlabs/headlessui/pull/2203))
 - Fix `FocusTrap` in `Dialog` when there is only 1 focusable element ([#2172](https://github.com/tailwindlabs/headlessui/pull/2172))
+- Improve `Tabs` wrapping around when controlling the component and overflowing the `selectedIndex` ([#2213](https://github.com/tailwindlabs/headlessui/pull/2213))
 
 ## [1.7.7] - 2022-12-16
 

packages/@headlessui-vue/src/components/tabs/tabs.test.ts

@@ -199,7 +199,6 @@ describe('Rendering', () => {
             selectedIndex,
             reverse() {
               tabs.value = tabs.value.slice().reverse()
-              selectedIndex.value = tabs.value.length - 1 - selectedIndex.value
             },
             handleChange(value: number) {
               selectedIndex.value = value
@@ -999,6 +998,106 @@ describe('`selectedIndex`', () => {
     assertTabs({ active: 0 })
     assertActiveElement(getByText('Tab 1'))
   })
+
+  it(
+    'should wrap around when overflowing the index when using a controlled component',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <TabGroup :selectedIndex="value" @change="set" v-slot="{ selectedIndex }">
+            <TabList>
+              <Tab>Tab 1</Tab>
+              <Tab>Tab 2</Tab>
+              <Tab>Tab 3</Tab>
+            </TabList>
+
+            <TabPanels>
+              <TabPanel>Content 1</TabPanel>
+              <TabPanel>Content 2</TabPanel>
+              <TabPanel>Content 3</TabPanel>
+            </TabPanels>
+
+            <button @click="set(selectedIndex + 1)">Next</button>
+          </TabGroup>
+        `,
+        setup() {
+          let value = ref(0)
+          return {
+            value,
+            set(v: number) {
+              value.value = v
+            },
+          }
+        },
+      })
+
+      await new Promise<void>(nextTick)
+
+      assertActiveElement(document.body)
+
+      await click(getByText('Next'))
+      assertTabs({ active: 1 })
+
+      await click(getByText('Next'))
+      assertTabs({ active: 2 })
+
+      await click(getByText('Next'))
+      assertTabs({ active: 0 })
+
+      await click(getByText('Next'))
+      assertTabs({ active: 1 })
+    })
+  )
+
+  it(
+    'should wrap around when underflowing the index when using a controlled component',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <TabGroup :selectedIndex="value" @change="set" v-slot="{ selectedIndex }">
+            <TabList>
+              <Tab>Tab 1</Tab>
+              <Tab>Tab 2</Tab>
+              <Tab>Tab 3</Tab>
+            </TabList>
+
+            <TabPanels>
+              <TabPanel>Content 1</TabPanel>
+              <TabPanel>Content 2</TabPanel>
+              <TabPanel>Content 3</TabPanel>
+            </TabPanels>
+
+            <button @click="set(selectedIndex - 1)">Previous</button>
+          </TabGroup>
+        `,
+        setup() {
+          let value = ref(0)
+          return {
+            value,
+            set(v: number) {
+              value.value = v
+            },
+          }
+        },
+      })
+
+      await new Promise<void>(nextTick)
+
+      assertActiveElement(document.body)
+
+      await click(getByText('Previous'))
+      assertTabs({ active: 2 })
+
+      await click(getByText('Previous'))
+      assertTabs({ active: 1 })
+
+      await click(getByText('Previous'))
+      assertTabs({ active: 0 })
+
+      await click(getByText('Previous'))
+      assertTabs({ active: 2 })
+    })
+  )
 })
 
 describe('Keyboard interactions', () => {