Improve controlled Tabs behaviour (#1050)

* Append tests for Tab.Group's selectedIndex.

* ensure that we correctly use the incoming selectedIndex

* update changelog

Co-authored-by: Ryoga Kitagawa <[email protected]>

Author: RobinMalfait

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure correct order when conditionally rendering `Menu.Item`, `Listbox.Option` and `RadioGroup.Option` ([#1045](https://github.com/tailwindlabs/headlessui/pull/1045))
+- Improve controlled Tabs behaviour ([#1050](https://github.com/tailwindlabs/headlessui/pull/1050))
 
 ## [Unreleased - @headlessui/vue]
 

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

@@ -551,6 +551,12 @@ describe('Rendering', () => {
       // test controlled behaviour
       await click(getByText('setSelectedIndex'))
       assertTabs({ active: 2 })
+
+      // test uncontrolled behaviour again
+      await click(getByText('Tab 2'))
+      expect(handleChange).toHaveBeenCalledTimes(2)
+      expect(handleChange).toHaveBeenNthCalledWith(2, 1)
+      assertTabs({ active: 1 })
     })
 
     it('should jump to the nearest tab when the selectedIndex is out of bounds (-2)', async () => {

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

@@ -202,6 +202,10 @@ function Tabs<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(
   }, [defaultIndex, selectedIndex, state.tabs, state.selectedIndex])
 
   let lastChangedIndex = useRef(state.selectedIndex)
+  useEffect(() => {
+    lastChangedIndex.current = state.selectedIndex
+  }, [state.selectedIndex])
+
   let providerBag = useMemo<ContextType<typeof TabsContext>>(
     () => [
       state,

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

@@ -579,6 +579,12 @@ describe('`selectedIndex`', () => {
     // test controlled behaviour
     await click(getByText('setSelectedIndex'))
     assertTabs({ active: 2 })
+
+    // test uncontrolled behaviour again
+    await click(getByText('Tab 2'))
+    expect(handleChange).toHaveBeenCalledTimes(2)
+    expect(handleChange).toHaveBeenNthCalledWith(2, 1)
+    assertTabs({ active: 1 })
   })
 
   it('should jump to the nearest tab when the selectedIndex is out of bounds (-2)', async () => {