Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow changes to the className prop when the <Transition /> component is currently not transitioning #2722

Merged
merged 2 commits into from
Aug 31, 2023
Merged

Allow changes to the className prop when the <Transition /> component is currently not transitioning #2722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d60d75d
allow changes to the `className` when we are _not_ transitioning
RobinMalfait Aug 31, 2023
8c167f1
update changelog
RobinMalfait Aug 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@headlessui-react/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Ensure hidden `Tab.Panel` components are hidden from the accessibility tree ([#2708](https://github.com/tailwindlabs/headlessui/pull/2708))
- Add support for `role="alertdialog"` to `<Dialog>` component ([#2709](https://github.com/tailwindlabs/headlessui/pull/2709))
- Ensure blurring the `Combobox.Input` component closes the `Combobox` ([#2712](https://github.com/tailwindlabs/headlessui/pull/2712))
- Allow changes to the `className` prop when the `<Transition />` component is currently not transitioning ([#2722](https://github.com/tailwindlabs/headlessui/pull/2722))

### Added

Expand Down
9 changes: 8 additions & 1 deletion packages/@headlessui-react/src/components/transitions/transition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,15 +403,18 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
unregister(container)
}, parentNesting)

let isTransitioning = useRef(false)
useTransition({
immediate,
container,
classes,
direction: transitionDirection,
onStart: useLatestValue((direction) => {
isTransitioning.current = true
nesting.onStart(container, direction, beforeEvent)
}),
onStop: useLatestValue((direction) => {
isTransitioning.current = false
nesting.onStop(container, direction, afterEvent)

if (direction === 'leave' && !hasChildren(nesting)) {
Expand All @@ -432,7 +435,11 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
// Already apply the `enter` and `enterFrom` on the server if required
className: classNames(rest.className, ...classes.current.enter, ...classes.current.enterFrom),
}
} else {
}

// If we are re-rendering while we are transitioning, then we should ensure that the classes are
// not mutated by React itself because we are handling the transition ourself.
else if (isTransitioning.current) {
// When we re-render while we are in the middle of the transition, then we should take the
// incoming className and the current classes that are applied.
//
Expand Down