Ensure Disclosure.Panel is properly linked (#1747)

* ensure `Disclosure.Panel` is properly linked * update changelog
tailwindlabs · Aug 9, 2022 · 4c433cd · 4c433cd
1 parent fa10cb0
commit 4c433cd
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 13 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix incorrect scrolling to the bottom when opening a `Dialog` ([#1716](https://github.com/tailwindlabs/headlessui/pull/1716))
 - Make form components uncontrollable ([#1683](https://github.com/tailwindlabs/headlessui/pull/1683))
 - Improve `Combobox` re-opening keyboard issue on mobile ([#1732](https://github.com/tailwindlabs/headlessui/pull/1732))
+- Ensure `Disclosure.Panel` is properly linked ([#1747](https://github.com/tailwindlabs/headlessui/pull/1747))
 
 ## Changed
 

diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -360,9 +360,8 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
   let [state, dispatch] = useDisclosureContext('Disclosure.Panel')
   let { close } = useDisclosureAPIContext('Disclosure.Panel')
 
-  let panelRef = useSyncRefs(ref, state.panelRef, () => {
-    if (state.linkedPanel) return
-    dispatch({ type: ActionTypes.LinkPanel })
+  let panelRef = useSyncRefs(ref, state.panelRef, (el) => {
+    dispatch({ type: el ? ActionTypes.LinkPanel : ActionTypes.UnlinkPanel })
   })
 
   let usesOpenClosedState = useOpenClosed()
@@ -374,16 +373,6 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
     return state.disclosureState === DisclosureStates.Open
   })()
 
-  // Unlink on "unmount" myself
-  useEffect(() => () => dispatch({ type: ActionTypes.UnlinkPanel }), [dispatch])
-
-  // Unlink on "unmount" children
-  useEffect(() => {
-    if (state.disclosureState === DisclosureStates.Closed && (props.unmount ?? true)) {
-      dispatch({ type: ActionTypes.UnlinkPanel })
-    }
-  }, [state.disclosureState, props.unmount, dispatch])
-
   let slot = useMemo<PanelRenderPropArg>(
     () => ({ open: state.disclosureState === DisclosureStates.Open, close }),
     [state, close]