`onSelect` not firing for mouse click when inside `Popover` or `Portal` in `1.0.0`

[ilovett]

I was introduced to cmdk through shadcn, and just upgraded to 1.0.0 to fix some with data-value selector if it had quotes. That seems to be fixed, but now I have lost the ability to click an item.

I can't figure out what's intercepting the click on individual items. Clicking "Enter" works on keyboard, and triggers onSelect.

Clicking on a CommandItem will re-render the whole component, but nothing happens. I cannot get any mouse / onSelect callback to trigger.

I've also tried wrapping items with group, and shouldFilter={false}

export function CommandInsidePopver({ value, onChange }: { value: string[]; onChange: (value: string[]) => void }) {
  const inputRef = React.useRef<HTMLInputElement>(null);
  const [inputValue, setInputValue] = React.useState('');

  // popup should only allow adding the value
  const options = inputValue ? [{ value: inputValue, label: `Add "${inputValue}"` }] : [];

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>
          Open
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0" align="start">
        <Command {/* onKeyDown={handleKeyDown} */}>
          <CommandPrimitive
            ref={inputRef}
            autoFocus
            value={inputValue}
            onValueChange={setInputValue}
            placeholder="Add Item..."
          />

          <CommandList className={cn('relative', Boolean(inputValue && options.length) === false && 'h-0')}>
            {options.map((option) => {
              return (
                <CommandItem
                  key={option.value}
                  // none of these triggered
                  // onClick={(evt) => {
                  //   debugger;
                  // }}
                  // onMouseUp={(e) => {
                  //   e.preventDefault();
                  //   e.stopPropagation();
                  //   debugger;
                  // }}
                  // onMouseDown={(e) => {
                  //   e.preventDefault();
                  //   e.stopPropagation();
                  //   debugger;
                  // }}
                  onSelect={() => {
                    // never triggers on click
                    setInputValue('');
                    onChange(option.value);
                  }}
                  className={'cursor-pointer'}
                >
                  {option.label}
                </CommandItem>
              );
            })}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

// PopoverContent
const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      {...props}
    />
  </PopoverPrimitive.Portal>
));

[thelivingchaos]

The problem lies in from shadcn, as you said in cmdk version 1.0.0 they fixed some issues with data-value selector.

In the CommandItem that is created by default come with this classes: relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50

You need to remove the data-disabled related: data-[disabled]:pointer-events-none: this one disable all cursor events listening data-[disabled]:opacity-50: this one put the text as disabled (only visual efect)

[ilovett]

That fixed it, thanks @thelivingchaos