From 2b161b377100c01450fc7bfee004268ed330933f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 12 Apr 2024 11:19:35 -0400 Subject: [PATCH] Make sure panels re-register when IDs are calculated in React < 18 (#2883) * Make sure panels re-register when IDs are calculated in React < 18 * Update changelog * Add comment --- packages/@headlessui-react/CHANGELOG.md | 4 ++++ .../@headlessui-react/src/components/tabs/tabs.tsx | 12 +++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) 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 diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx index 5f705db4db..e25eb2b41e 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx @@ -566,7 +566,17 @@ function PanelFn( let internalPanelRef = useRef(null) let panelRef = useSyncRefs(internalPanelRef, ref) - useIsoMorphicEffect(() => actions.registerPanel(internalPanelRef), [actions, internalPanelRef]) + useIsoMorphicEffect( + () => actions.registerPanel(internalPanelRef), + [ + 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')