ui: Bug: Flickering In Command Component When Using In Dialog
When using the Command component in a Dialog (the CommandDialog component) when the dialog/command flickers.
There is a video demonstrating:
https://github.com/shadcn-ui/ui/assets/45822217/dd76ec3a-0783-446a-b308-033038bbc0b3
The code of the component itself is unchanged from the cli, the usage of it in the code is the following:
<> <Button onClick={() => setOpen(true)} variant="outline" className={cn( 'relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64 secondary' )} > <span className="hidden lg:inline-flex">Search ticker or cik...</span> <span className="inline-flex lg:hidden">Search...</span> <kbd className="pointer-events-none absolute right-2.5 top-auto hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"> <span className="text-xs">/</span> </kbd> </Button> <CommandDialog open={open} onOpenChange={setOpen}> <CommandInput placeholder="Search ticker or cik..." /> <CommandList> <CommandEmpty>No stocks found.</CommandEmpty> <CommandGroup> {companies.map((company) => ( <CommandItem key={company.cik}>{company.name}</CommandItem> ))} </CommandGroup> </CommandList> </CommandDialog> </>
About this issue
- Original URL
- State: open
- Created 10 months ago
- Comments: 19
Radix-ui dialog and alert dialog seems to work without flickering (with Select Component) and I made a temporary fix by removing “data-[state=open]:animate-in” from shadcn’s DialogPrimitive.Content className in my project.
This works for me but obviously gets rid of the starting/opening animation. This solution is only temporary and should be addressed. Leaving this issue open so @shadcn can fix it
I’ve noticed that in my case, the flickering dissapears when I remove the strict mode tag, with this, the components only renders one time, so I expect the flickering won’t be visible in production.