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 <ryoga.kitagawa@gmail.com>

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,