[bug]: command clicks are ignored (although enter works as expected

renardeinside commented 1 month ago

Describe the bug

Given this component:

const SatelliteSearch = () => {
  const satellites = useAtomValue($satellites);
  const [selectedSatelliteIndexes, setSelectedSatelliteIndexes] = useAtom(
    $selectedSatellitesIndexes
  );

  const [isFocused, setIsFocused] = useState(false);
  return (
    <div className="absolute top-2 right-2 z-50 w-96">
      <Command className="rounded-lg border shadow-md">
        <CommandInput
          placeholder="Search for a satellite by name or NORAD ID"
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
        />
        <CommandList>
          {isFocused && (
            <>
              <CommandEmpty>No results found.</CommandEmpty>
              {satellites.map((satellite) => (
                <CommandItem
                  key={`${satellite.name} (${satellite.satnum})`}
                  value={`${satellite.name} (${satellite.satnum})`}
                  onSelect={() => {
                    // if the satellite is already selected, remove it from the list
                    if (selectedSatelliteIndexes.has(satellite.index!)) {
                      selectedSatelliteIndexes.delete(satellite.index!);
                      setSelectedSatelliteIndexes(
                        new Set(selectedSatelliteIndexes)
                      );
                    } else {
                      setSelectedSatelliteIndexes(
                        new Set([satellite.index!, ...selectedSatelliteIndexes])
                      );
                    }
                  }}
                >
                  <span className="flex flex-row items-center w-full">
                    {satellite.name} ({satellite.satnum})
                  </span>

                  {selectedSatelliteIndexes.has(satellite.index!) ? (
                    <CheckIcon className="ml-2 h-4 w-4 text-green-500" />
                  ) : null}
                </CommandItem>
              ))}
            </>
          )}
        </CommandList>
      </Command>
    </div>
  );
};

Selecting via Enter works, but clicks do nothing (the list is just closed with no action and nothing I logs).

Affected component/components

Command, Command Item

How to reproduce

Provided in the description.

Codesandbox/StackBlitz link

No response

Logs

Nothing in the logs

System Info

package.json:

"cmdk": "^1.0.0",

These two issues are both closed without an actual fix.

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

woodward54 commented 3 weeks ago

I am also seeing the same issue.

Graphity commented 2 weeks ago

currently facing same issue

robinprashanth commented 2 weeks ago

I am also facing the same issue

wcosmas commented 1 week ago

I'm having the same issue.

jvalverdepa commented 5 days ago

This is because you have installed cmdk@^1.0.0 version guys. There are some breaking changes since that version: https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

You can fix it by replacing the following className section in CommandItem:

data-[disabled]:pointer-events-none data-[disabled]:opacity-50

aria-disabled:pointer-events-none aria-disabled:opacity-50

shadcn-ui / ui