Skip to content

Commit c4d8289

Browse files
authored
Ensure that appear works regardless of multiple rerenders (#1179)
* ensure that `appear` works regardless of multiple rerenders * remove incorrect `afterLeave` call * update changelog * only set the prevShow when using the unmount strategy
1 parent cefb899 commit c4d8289

File tree

2 files changed

+11
-5
lines changed

2 files changed

+11
-5
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1616
- Guarantee DOM sort order when performing actions ([#1168](https://github.com/tailwindlabs/headlessui/pull/1168))
1717
- Fix `<Transition>` flickering issue ([#1118](https://github.com/tailwindlabs/headlessui/pull/1118))
1818
- Improve outside click support ([#1175](https://github.com/tailwindlabs/headlessui/pull/1175))
19+
- Ensure that `appear` works regardless of multiple rerenders ([#1179](https://github.com/tailwindlabs/headlessui/pull/1179))
1920

2021
## [Unreleased - @headlessui/vue]
2122

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ let TransitionChild = forwardRefWithAs(function TransitionChild<
216216

217217
let { show, appear, initial } = useTransitionContext()
218218
let { register, unregister } = useParentNesting()
219-
let prevShow = useRef(undefined)
219+
let prevShow = useRef<boolean | null>(null)
220220

221221
let id = useId()
222222

@@ -228,7 +228,6 @@ let TransitionChild = forwardRefWithAs(function TransitionChild<
228228
if (!isTransitioning.current) {
229229
setState(TreeStates.Hidden)
230230
unregister.current(id)
231-
events.current.afterLeave()
232231
}
233232
})
234233

@@ -338,8 +337,14 @@ let TransitionChild = forwardRefWithAs(function TransitionChild<
338337
])
339338

340339
useIsoMorphicEffect(() => {
341-
prevShow.current = show
342-
}, [show])
340+
if (!skip) return
341+
342+
if (strategy === RenderStrategy.Hidden) {
343+
prevShow.current = null
344+
} else {
345+
prevShow.current = show
346+
}
347+
}, [show, skip, state])
343348

344349
let propsWeControl = { ref: transitionRef }
345350
let passthroughProps = rest
@@ -392,7 +397,7 @@ let TransitionRoot = forwardRefWithAs(function Transition<
392397

393398
let initial = useIsInitialRender()
394399
let transitionBag = useMemo<TransitionContextValues>(
395-
() => ({ show: show as boolean, appear: appear || !initial, initial }),
400+
() => ({ show: show as boolean, appear, initial }),
396401
[show, appear, initial]
397402
)
398403

0 commit comments

Comments
 (0)