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

Radix UI / Select component in preact #4222

Closed
hapaxlife opened this issue Nov 29, 2023 · 1 comment
Closed

Radix UI / Select component in preact #4222

hapaxlife opened this issue Nov 29, 2023 · 1 comment

Comments

@hapaxlife
Copy link

Describe the bug
I try to port Radix UI to preact & Fresh

See :

Every components work except Select which freeze the page (getItems has no element => error)

To Reproduce

The code with React
https://codesandbox.io/p/sandbox/select-radixui-react-klhjfn

The code with Preact : I have only change React.forwardRef to import { forwardRef } from "preact/compat";
In Fresh, I made alias/external to react
The repo to test
https:/hapaxlife/select-radixui-preact

Expected behavior
When you click on Select, the page freezes.

I suspect that error comes from Preact but not sure if Fresh is involve

@andrewiggins
Copy link
Member

This appears to be due to the fact that React delays invoking unmount effects until commit phase, whereas Preact invokes unmount effects synchronously.

Interestingly, radix-ui's Select unmounts, then remounts all of the Select's children upon opening the Select: https:/radix-ui/primitives/blob/c31c97274ff357aea99afe6c01c1c8c58b6356e0/packages/react/select/src/Select.tsx#L407-L421

Seems like that'd be not great for performance. I'd expect just a mount of all the select children upon opening.

This useEffect is what causes radix-ui to appear to see no items: https:/radix-ui/primitives/blob/c31c97274ff357aea99afe6c01c1c8c58b6356e0/packages/react/collection/src/Collection.tsx#L86-L89

Upon unmounting Select's children, this effect is cleaned up and the itemMap is cleared. When rendering/mounting the children again, itemMap is empty and so it thinks there are no items (which arguably there aren't since we just unmounted them). This appears to work in React cuz the unmount is delayed until after the render.

Sorry I don't have a workaround or fix at the moment, but just wanted to leave some notes here for posterity in case I or someone else picks this up again.

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

No branches or pull requests

2 participants