public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Fix transitioning away

Browse Source 
Fixes #17

The root problem here, which took me ages to find, was that `state` should not be reactive. It should only be set once the child has finished, via the nesting context.
This commit is contained in:
Ryan Gossiaux
2021-12-14 22:56:55 -08:00
parent 20e5360291
commit f1edb17609
2 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/lib/components/transitions/TransitionRoot.svelte
View File

@@ -120,23 +120,36 @@
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
$: shouldShow = (() => {
function computeShow(
show: boolean,
openClosedState: State | undefined
): boolean {
if (show === null && openClosedState !== undefined) {
return match($openClosedState, {
return match(openClosedState, {
[State.Open]: true,
[State.Closed]: false,
});
}
return show;
})();
$: if (shouldShow !== true && shouldShow !== false) {
throw new Error(
"A <Transition /> is used but it is missing a `show={true | false}` prop."
);
}
$: state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
let shouldShow = computeShow(
show,
openClosedState !== undefined ? $openClosedState : undefined
);
$: {
shouldShow = computeShow(
show,
openClosedState !== undefined ? $openClosedState : undefined
);
if (shouldShow !== true && shouldShow !== false) {
throw new Error(
"A <Transition /> is used but it is missing a `show={true | false}` prop."
);
}
}
let state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
let nestingBag: Writable<NestingContextValues> = writable();
nestingBag.set(