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.

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

[preact/compat] Difference in how events are processed (floating-ui) #4373

Open
GresiRoost opened this issue May 8, 2024 · 2 comments
Open
Labels

Comments

@GresiRoost
Copy link

Describe the bug
There seems to be a difference between how preact/compat processes events and how React does it.
This appears to cause various issues in third party libraries such as floating-ui.

I attempted to port the floating-ui "DropdownMenu" preact example directly to use preact+htm.

To Reproduce
Port the floating-ui examples to use preact+htm.

I posted my attempt here (preact+htm+floating-ui has been bundled together for the simplicity of the example):

https://tidspunkt.dk/bugs/floatingpreact/

The original React version that works fine can be found and tested out here:
https://codesandbox.io/s/admiring-lamport-5wt3yg?file=/src/DropdownMenu.tsx

Steps to reproduce the behavior:
(Happens in both Chrome and Firefox, doesn't seem to be a browser issue)

  1. Click to open the menu
  2. Hover the mouse over "Copy as" and the submenu opens fine
  3. Move the mouse over into the new submenu
  4. Most of the time the submenu closes completely. Sometimes if you move very slow you can observe flicker as a lot of events are processed. Then you can move into the new menu. Any submenus from there will result in all the submenus closing.
floatingpreact.mp4

Expected behavior
The submenus should work like in the provided React example.

@JoviDeCroock
Copy link
Member

Mind posting the codesandbox with Preact as well, then we can see if this was the case on every version, it does feel like this is maybe a state batching issue as it sometimes does work but sometimes not.

@GresiRoost
Copy link
Author

I tried forking and modifying the original react example on codesandbox but I constantly run into weird issues.
I'm not used to that entire technology stack (which is why I'm using no-compile preact with htm in the first place).
Hopefully it's not difficult for someone who has a little experience with it to quickly swap out react with preact in the example file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants