Skip to content

Commit 13b3100

Browse files
authored
Ensure Transition component state doesn't change when it becomes hidden (#3372)
* do not change visibility of `Transition` component This was originally introduced in #1519 to fix an issue where some enter transitions where broken: #1503 However, since we refactored the `Transition` component to make use of the `useTransition` hook, I can't seem to reproduce this issue anymore. In fact, removing this code fixes an issue. The bigger issue here is that when the component becomes hidden, that we always set the state to hidden as well. But if it becomes visible again, we don't show it again. Right now, since I couldn't reproduce any of the other issue, I opted to just removing the code entirely. But if we ever need it again, we probably have to make sure that it becomes visible in the other scenario as well. Fixes: #3328 * update changelog
1 parent a36380f commit 13b3100

File tree

2 files changed

+3
-5
lines changed

2 files changed

+3
-5
lines changed

packages/@headlessui-react/CHANGELOG.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10-
- Nothing yet!
10+
### Fixed
11+
12+
- Ensure `Transition` component state doesn't change when it becomes hidden ([#3372](https://github.com/tailwindlabs/headlessui/pull/3372))
1113

1214
## [2.1.2] - 2024-07-05
1315

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { useEvent } from '../../hooks/use-event'
1717
import { useIsMounted } from '../../hooks/use-is-mounted'
1818
import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
1919
import { useLatestValue } from '../../hooks/use-latest-value'
20-
import { useOnDisappear } from '../../hooks/use-on-disappear'
2120
import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
2221
import { useSyncRefs } from '../../hooks/use-sync-refs'
2322
import { transitionDataAttributes, useTransition } from '../../hooks/use-transition'
@@ -549,9 +548,6 @@ function TransitionRootFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_C
549548
[show, appear, initial]
550549
)
551550

552-
// Ensure we change the tree state to hidden once the transition becomes hidden
553-
useOnDisappear(show, internalTransitionRef, () => setState(TreeStates.Hidden))
554-
555551
useIsoMorphicEffect(() => {
556552
if (show) {
557553
setState(TreeStates.Visible)

0 commit comments

Comments
 (0)