2nd createEffect always runs
I'm testing a
I have this log:
What should happen is that unset should not be called when moving from 1 button to the next.
@floating-ui/react port to solid.
I have these two effects:
createEffect(() => {
const unset = () => {
console.log('unset');
floatingContext().onOpenChange(false);
group.setState({ delay: group.initialDelay, currentId: null });
};
if (!enabled()) return;
if (!group.currentId) return;
console.log('1');
console.log('1 open', floatingContext().open());
console.log('1 currentId', group.currentId === id);
if (!floatingContext().open() && group.currentId === id) {
if (group.timeoutMs) {
const t = window.setTimeout(unset, group.timeoutMs);
onCleanup(() => {
clearTimeout(t);
});
}
unset();
}
});
createEffect(() => {
if (!enabled()) return;
if (group.setCurrentId === NOOP || !floatingContext().open()) return;
console.log('2 open', floatingContext().open());
console.log('2 setting currentId', id);
group.setCurrentId(id);
});
createEffect(() => {
const unset = () => {
console.log('unset');
floatingContext().onOpenChange(false);
group.setState({ delay: group.initialDelay, currentId: null });
};
if (!enabled()) return;
if (!group.currentId) return;
console.log('1');
console.log('1 open', floatingContext().open());
console.log('1 currentId', group.currentId === id);
if (!floatingContext().open() && group.currentId === id) {
if (group.timeoutMs) {
const t = window.setTimeout(unset, group.timeoutMs);
onCleanup(() => {
clearTimeout(t);
});
}
unset();
}
});
createEffect(() => {
if (!enabled()) return;
if (group.setCurrentId === NOOP || !floatingContext().open()) return;
console.log('2 open', floatingContext().open());
console.log('2 setting currentId', id);
group.setCurrentId(id);
});
Hover over button:
2 open true
2 setting currentId All tooltips in this group share the same delay behavior
1 open false
1 currentId false
1 open true
1 currentId true
1 open false
1 currentId false
1 open false
1 currentId false
1 open false
1 currentId false
1 open false
1 currentId false
----
Hover out button:
1 open false
1 currentId true
unset
---
Hover over button:
2 open true
2 setting currentId Third tooltip also benefits from the delay group
1 open false
1 currentId false
1 open false
1 currentId false
1 open true
1 currentId true
1 open false
1 currentId false
1 open false
1 currentId false
1 open false
1 currentId false
---
Hover out button:
1 open false
1 currentId true
unset
Hover over button:
2 open true
2 setting currentId All tooltips in this group share the same delay behavior
1 open false
1 currentId false
1 open true
1 currentId true
1 open false
1 currentId false
1 open false
1 currentId false
1 open false
1 currentId false
1 open false
1 currentId false
----
Hover out button:
1 open false
1 currentId true
unset
---
Hover over button:
2 open true
2 setting currentId Third tooltip also benefits from the delay group
1 open false
1 currentId false
1 open false
1 currentId false
1 open true
1 currentId true
1 open false
1 currentId false
1 open false
1 currentId false
1 open false
1 currentId false
---
Hover out button:
1 open false
1 currentId true
unset
1 Reply
How can I ensure the 2nd effect runs first always?
react code here: https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/components/FloatingDelayGroup.tsx#L160