Issue with <CommandEmpty> inside of a <Popover>

[matthewrosse]

trafficstars

I'm trying to implement a combobox like here, literally copy and paste from the code section (first combobox component) and something weird happens with <CommandEmpty> component. It appears only for a fraction of second when closing the popover. I attached a gif below to visualize this.

EDIT: It works renders fine when filtering, but not when the data is an empty array.

[jonasmerlin]

@matthewrosse I have the exact same issue. Did you find a solution?

[soags]

pacocoursey/cmdk#149 The issue arises due to the Empty component in cmdk skipping the first render. To fix this, ensure the first render is not skipped or make it controllable through an option.

No skip first render

const CommandEmpty = React.forwardRef<
  HTMLDivElement,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>(({ className, ...props }, ref) => {
  const render = useCommandState((state) => state.filtered.count === 0)

  if (!render) return null

  return (
    <div
      ref={ref}
      className={cn('py-6 text-center text-sm', className)}
      cmdk-empty=""
      role="presentation"
      {...props}
    />
  )
})

Option

interface CommandEmptyProps
  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> {
  firstRender?: boolean
}

const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>(
  ({ firstRender = false, className, ...props }, ref) => {
    const isFirstRender = React.useRef(true)
    const render = useCommandState((state) => state.filtered.count === 0)

    React.useEffect(() => {
      isFirstRender.current = false
    }, [])

    if ((!firstRender && isFirstRender.current) || !render) return null

    return (
      <div
        ref={ref}
        className={cn('py-6 text-center text-sm', className)}
        cmdk-empty=""
        role="presentation"
        {...props}
      />
    )
  },
)

[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.

[tgdn]

This issue still occurs when the array is empty on initial mount.