Skip to content

[Bug]: Select text flickers with the placeholder on change #2160

@NoelDeMartin

Description

@NoelDeMartin

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:

https://github.com/unovue/reka-ui/blob/483cd743ffaab033acf21e41f3d9a5f2bb67388a/packages/core/src/Select/SelectContent.vue#L59..L75

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions