From 5ae733283b8587438e8dde36fe237124bd3bee16 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 14 Dec 2023 16:22:03 -0500 Subject: [PATCH 1/3] Make sure panels re-register when IDs are calculated in React < 18 --- packages/@headlessui-react/src/components/tabs/tabs.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx index 5f705db4db..5205fb4e20 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx @@ -566,7 +566,10 @@ function PanelFn( let internalPanelRef = useRef(null) let panelRef = useSyncRefs(internalPanelRef, ref) - useIsoMorphicEffect(() => actions.registerPanel(internalPanelRef), [actions, internalPanelRef]) + useIsoMorphicEffect( + () => actions.registerPanel(internalPanelRef), + [actions, internalPanelRef, id] + ) let mySSRIndex = useStableCollectionIndex('panels') From 953bbb11831a4156e329cff8164f7fcb4c94eb0b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 14 Dec 2023 16:25:57 -0500 Subject: [PATCH 2/3] Update changelog --- packages/@headlessui-react/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 8747b09ac4..c4c866f9b9 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `immediate` prop to `` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686)) - Add `virtual` prop to `Combobox` component ([#2779](https://github.com/tailwindlabs/headlessui/pull/2779)) +### Fixed + +- Make sure panels re-register when IDs are calculated in React < 18 ([#2883](https://github.com/tailwindlabs/headlessui/pull/2883)) + ## [1.7.18] - 2024-01-08 ### Fixed From 6c259a1377e86de0f72f6c516fe42668a92fa3b7 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 15 Dec 2023 10:12:51 -0500 Subject: [PATCH 3/3] Add comment --- packages/@headlessui-react/src/components/tabs/tabs.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx index 5205fb4e20..e25eb2b41e 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx @@ -568,7 +568,14 @@ function PanelFn( useIsoMorphicEffect( () => actions.registerPanel(internalPanelRef), - [actions, internalPanelRef, id] + [ + actions, + internalPanelRef, + + // The `id` prop is here to force a re-render of the + // corresponding `Tab` whenever the `id` is calculated in React < 18 + id, + ] ) let mySSRIndex = useStableCollectionIndex('panels')