We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hi! In above video you can see a flash of empty message content while closing the popover and when the loading component is present.
I've used Radix Popover here in combination with cmdk, similar as you can see in Shadcn/ui Combobox example.
I'm not 100% sure this is a bug, because I think it is connected with how radix handles css animations.
Are there any workarounds about it, like manually show Empty message somehow?
Below is a code used in the example
export function AppsFilter() { const { data, isLoading } = useApplicationsQuery(); const [selectedApps, setSelectedApps] = useState<Application[]>([]); const [open, setOpen] = useState(false); return ( <Popover.Root onOpenChange={setOpen} open={open}> <Popover.Trigger asChild> <Combobox.ValueDisplay className="shrink-0 md:flex-[1]" open={open}> {selectedApps.length === 0 ? 'Applications' : selectedApps.map((app) => ( <Badge asChild className="pl-[3px]" key={app.id}> <button onClick={(e) => { e.stopPropagation(); setSelectedApps((prev) => { return prev.filter((a) => app.id !== a.id); }); if (selectedApps.length === 1 && selectedApps[0].id === app.id) setOpen(true); }} type="button" > <AppIcon alt={app.name} size="sm" /> <X size="1em" /> </button> </Badge> ))} </Combobox.ValueDisplay> </Popover.Trigger> <Popover.Content> <Command.Root> <Command.Input /> <Command.List> <Command.Empty>No applications found 🫤</Command.Empty> {isLoading && <Command.Loading>Getting apps…</Command.Loading>} {data?.map((app) => ( <Command.Item isSelected={!!selectedApps.find((a) => a.id === app.id)} key={app.id} onSelect={(v) => { console.log(v); setSelectedApps((prev) => { if (prev.find((a) => a.id === app.id)) { return prev.filter((a) => a.id !== app.id); } return [...prev, app]; }); }} value={app.name} > {app.name} </Command.Item> ))} </Command.List> </Command.Root> </Popover.Content> </Popover.Root> ); }
export const PopoverContent = forwardRef< ElementRef<typeof PopoverPrimitive.Content>, ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> >(({ className, align = 'start', sideOffset = 4, ...props }, ref) => ( <PopoverPrimitive.Portal> <PopoverPrimitive.Content align={align} className={cn( 'ui-z-tooltip ui-w-[var(--radix-popper-anchor-width)] ui-overflow-hidden ui-duration-150', 'data-[state=open]:ui-animate-in data-[state=closed]:ui-animate-out data-[state=closed]:ui-fade-out data-[state=open]:ui-fade-in', cardStyles, className )} ref={ref} sideOffset={sideOffset} {...props} /> </PopoverPrimitive.Portal> )); PopoverContent.displayName = PopoverPrimitive.Content.displayName;
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Screen.Recording.2024-02-21.at.10.02.54.mov
Hi! In above video you can see a flash of empty message content while closing the popover and when the loading component is present.
I've used Radix Popover here in combination with cmdk, similar as you can see in Shadcn/ui Combobox example.
I'm not 100% sure this is a bug, because I think it is connected with how radix handles css animations.
Are there any workarounds about it, like manually show Empty message somehow?
Below is a code used in the example
The text was updated successfully, but these errors were encountered: