preactjs
Radix UI / Select component in preact
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://github.com/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
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://github.com/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://github.com/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.
