List selection doesn't reset when using external filtering

[glocore]

When filtering the list externally, the selected list item doesn't reset to 0 when the list changes. In the screencap below, I'm using Fuse.js to filter a list and mapping over the results.

https://user-images.githubusercontent.com/24620401/200040992-c7883cd0-9413-464e-bf5f-2dea6bb2aee5.mov

[pacocoursey]

That's expected; because you're managing filtering/ordering yourself, you should also take control of the value and reset it when appropriate.

[glocore]

@pacocoursey I agree, but resetting the value prop to the first item breaks keyboard navigation and selection since those are handled internally by cmdk. Is there a way to control those aspects externally as well?

[pacocoursey]

Ah interesting, maybe there should be an option to control those as well. I haven't actually the tried the case you are – will leave this issue open to see if there's a natural way to make it work…

[manovotny]

I ran into this too. A workaround is to control the value on Command and reset it when input changes. It appeared to work for my use case that was experiencing the same issues above.

const [selectedValue, setSelectedValue] = useState('');

return (
  <Command.Dialog
    shouldFilter={false}
    value={selectedValue}
    onValueChange={(v) => {
      setSelectedValue(v);
    }}
  >
    <Command.Input
      onValueChange={(v): void => {
        setSelectedValue('');
      }}
    />
    ...
  </Command.Dialog>
);