Bug: Flickering In Command Component When Using In Dialog

[orelhochenboym]

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> </>

[orelhochenboym]

Also, I am noticing that the CommandItems are a bit blurry... any solution for that?

I have researched this issue a bit more, the flickering seems to happen only when I render a large amount of CommandItems (companies array has about 7K items. That causes lag when searching as well). When I reduce the amount of items in the companies array, it seems not to flicker...

[Joshuajrodrigues]

Is it possible that the data has duplicate keys ? Anything in the console ?

[orelhochenboym]

The data doesn't have duplicate keys nor any errors popup in the console.

[jacovzap]

I have the same problem with a Dialog containing a Form. Isn't there any solution yet?

[Idan-Garay]

Got the same bug too with Select Component nested in Dialog. During debugging, I found out flicker disappears when 'SelectContent' is commented out.

[Idan-Garay]

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.

[jacovzap]

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.

[byonghun]

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 was the culprit for me. Thank you!

Have you tested this in production without commenting out data-[state=open]:animate-in?

[LukeM-97]

 <DialogPrimitive.Content
      onClick={(event) => event.stopPropagation()}
      ref={ref}
      className={cn(
        "animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid gap-4 rounded-b-lg border bg-background shadow-lg focus:outline-none dark:border-none sm:rounded-lg",
        className
      )}
      {...props}
    >
      {children}
    </DialogPrimitive.Content>
    
    
    I had a flickering issue when i had a popup that was triggered by a button on an accordion. This flickering issue kept opening the accordion in the background because of event bubbling. 
    
    I therefore added ` onClick={(event) => event.stopPropagation()}` to my dialog content

[orelhochenboym]

 <DialogPrimitive.Content
      onClick={(event) => event.stopPropagation()}
      ref={ref}
      className={cn(
        "animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid gap-4 rounded-b-lg border bg-background shadow-lg focus:outline-none dark:border-none sm:rounded-lg",
        className
      )}
      {...props}
    >
      {children}
    </DialogPrimitive.Content>
    
    
    I had a flickering issue when i had a popup that was triggered by a button on an accordion. This flickering issue kept opening the accordion in the background because of event bubbling. 
    
    I therefore added ` onClick={(event) => event.stopPropagation()}` to my dialog content

This doesn't work for me unfortunately

[orelhochenboym]

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.

This doesn't work for me either

[orelhochenboym]

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

[mosquitochang]

I believe it is related to https://github.com/radix-ui/primitives/issues/2532.

The data-[state=open]:animate-in caused this issue because its keyframes only have the from keyword.

To temporarily fix this issue in shadcn-ui, we need to rewrite our animation keyframes that contain both the from and to keywords.

[hayato94087]

When I execute dialog in my iPhone, I saw flickering. After I remove data-[state=open]:animate-in data-[state=closed]:animate-out, flickering is disappeared.

    <DialogPrimitive.Content
      ref={ref}
      // remove "data-[state=open]:animate-in data-[state=closed]:animate-out" to avoid flickering
      // https://github.com/shadcn-ui/ui/issues/1351
      className={cn(
        "bg-background data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
        className,
      )}
      // original
      // className={cn(
      //   "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
      //   className,
      // )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>

[stuartakeero]

Also, I am noticing that the CommandItems are a bit blurry... any solution for that?

I have researched this issue a bit more, the flickering seems to happen only when I render a large amount of CommandItems (companies array has about 7K items. That causes lag when searching as well). When I reduce the amount of items in the companies array, it seems not to flicker...

I'm not sure about your specific use case but I also had the same issue with the items being blurry. It was caused by the border-b on the CommandInput. I had mine set to [0.5px] and the blurring went away when I removed it.

@shadcn - this blurring is in the example in the docs too - in the Dialog version - just fyi!

[rogue-kitten]

i had a similar issue, in which the select and the popover elements where flickering when i was trying to close them. I was able to overcome that by removing data-[state=closed]:animate-out from the PopoverContent and SelectContent components.

[TimurKr]

I solved this by removing animate-in from my tailwind.config.ts file. The issue was that the tailwind plugin tailwindcss-animate provides you with an animate-in class while I was defining my custom animate-in animation in my config file from before I was using shadcn-ui. So basically both were running, hence the flicker. Make sure you don't have duplicate definitions of the animate-in class.

[Edjhernandez]

In my case, the hover to CommandItem doesn't work... any comments about it?

[TejasThombare20]

const CommandItem = React.forwardRef< React.ElementRef<typeof CommandPrimitive.Item>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>

(({ className, ...props }, ref) => ( <CommandPrimitive.Item ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary aria-selected:text-white aria-selected:font-bold ", // "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary aria-selected:text-white aria-selected:font-bold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ", className )} {...props} /> ));

above chages will help to working onClick function on Child of CommandItem

[satyam-agsft]

removing this **data-[state=open]:animate-in** works for me, thanks

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[SWatchmaker]

Just in case, this code on my main css file worked for me. I know that applying the style to the entire document can be unnecessary, but you can apply the style rules to your specific components.

* {
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}