-
-
Notifications
You must be signed in to change notification settings - Fork 454
Description
I've noticed that changing from one option to another in the Select component, there is a small flicker showing the empty selection placeholder. I've looked into the code, and I've found the root of the problem. You can find a proposal to fix this in #2161, but I'm not sure that's the right fix so I'm also opening this issue to track it separately.
Reproduction
You can reproduce this in the playground, but here's a slowed down video:
rekaui-select-flicker.mp4
Origin
After digging into the code, I found that the root of this issue can be found in the SelectContent component:
Essentially, when the select is open/closed, the content of the select is toggled between a popover or a fragment outside of the DOM. This causes some internal mounted/unmounted hooks that remove all the options from the select, and add them again in the following frame. With the unintended consequence that during one frame, the Select doesn't have any options available, and that's why it's rendering the placeholder.