[preact/compat] @radix-ui/react-tooltip immediately hide tooltip after hover on element

[glook]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
Radix tooltips immediately closing after hover on element

To Reproduce

https://codesandbox.io/s/preact-radix-ui-react-tooltip-issue-lshsmd?file=/src/App.tsx

Steps to reproduce the behavior:

1. Hover on button
2. You will see that tooltip will be visible for just a moment

Expected behavior
Expected that tooltip will be visible all time when cursor is hover button

[nikogoli]

I found a solution. It does not "solve" the problem, but works anyway.

https://codesandbox.io/s/preact-radix-ui-react-tooltip-issue-forked-kys9rl?file=/src/tooltipDemo.tsx

Just import useState and create a boolean-state and its stateUpdater, and pass them as open and onOpenChange properties of <Tooltip.Root>.

I found this technique in the code of shadcn/ui's Collapsible-demo.

[JoviDeCroock]

@nikogoli Very interesting find, I really wonder if it's some kind of double event firing/... but it stands out that if other libraries are running into it that it might not be isolated to preact 😅

[JoviDeCroock]

I am actually quite unsure of how this even works in React, the steps are the following

• We open it by hovering https://github.com/radix-ui/primitives/blob/main/packages/react/tooltip/src/Tooltip.tsx#L175-L180
• This dispatches an event
• Our TooltipImpl receives this event and closes https://github.com/radix-ui/primitives/blob/main/packages/react/tooltip/src/Tooltip.tsx#L517

This kind of relies on the Tooltip being rendered after the document finishes the processing of the event. As the DOM interleaves microticks between bubbling this isn't a set time so the node could have mounted or not yet 😅 in the core of Preact we handle this with an event-clock so an event that's newer than its listener won't fire a callback. These are custom events and maybe the React event delegation handles that similarly 😅

This issue should probably be fixed on the radix side where it can't close the newly opened popup immediately, event-delegation executes all these events synchronously but that's not really how browser events work.