Input Filtering and Display of Command Items

[nhamonin]

Description

I am encountering an issue with the Command components from shadcnui where the input filtering does not update the displayed items as expected. When I type a single character, such as "c", the "calendar" option appears correctly. However, when I add another character to the input, making it "cc", no items are shown. Furthermore, when I delete one "c" to revert to the single character "c", I still see no items displayed. The suggestions and input only work as expected when all characters are removed from the input field. This behavior is also reproducible on the official shadcnui website with the first example of the Command component.

Steps to Reproduce

1. Focus on the input field and type "c".
2. Observe the "calendar" option appearing correctly.
3. Type another "c" to make the input "cc".
4. Notice that no items are displayed, which is unexpected.
5. Remove one "c" to have just "c" in the input field again.
6. Observe that no items are displayed still, which is unexpected.
7. Clear the input field completely.
8. Notice that the suggestions and input work as expected again.

This behavior can be observed on the official shadcnui Command component documentation page, following the steps outlined above with the first example provided.

Expected Behavior

The filtered list of command items should update and display correctly as the input changes, showing and hiding items based on the current filter.

Actual Behavior

The command items disappear when additional characters are typed and do not reappear when characters are removed, only when the input field is completely cleared.

Video Demonstration

Please see this video for a demonstration of the issue: https://github.com/shadcn-ui/ui/assets/43292302/20ded56e-6654-4a56-8425-ad6c2eb31932

[theosenoussaoui]

Description

I am encountering an issue with the Command components from shadcnui where the input filtering does not update the displayed items as expected. When I type a single character, such as "c", the "calendar" option appears correctly. However, when I add another character to the input, making it "cc", no items are shown. Furthermore, when I delete one "c" to revert to the single character "c", I still see no items displayed. The suggestions and input only work as expected when all characters are removed from the input field. This behavior is also reproducible on the official shadcnui website with the first example of the Command component.

...

Observed the same behavior and after a little bit of searching, solved it by adding the value props (and the correct corresponding value) on my CommandItem component. :+1:

[nhamonin]

This issue remains relevant. A proposed fix has been submitted and can be reviewed in Pull Request #2267. Please consider keeping this issue open until the PR is evaluated and merged to ensure the problem is resolved.

[TomJD]

I have a similar issue as well. This is the CommandList

<CommandList>
              {suggestions.map((suggestion) => {
                const value = getLastDefinedValue(suggestion);
                console.log(value);
                return (
                  <CommandItem
                    key={value}
                    value={value}
                    onSelect={() => handleLocationChanged(suggestion)}
                  >
                    <div>
                      {value}
                      <br />
                      <small>{getPath(suggestion)}</small>
                    </div>
                    <CheckIcon
                      className={cn(
                        'ml-auto h-4 w-4',
                        selectedLocationText === suggestion.state ||
                          selectedLocationText === suggestion.province ||
                          selectedLocationText === suggestion.district ||
                          selectedLocationText === suggestion.region ||
                          selectedLocationText === suggestion.city ||
                          selectedLocationText === suggestion.neighborhood
                          ? 'opacity-100'
                          : 'opacity-0',
                      )}
                    />
                  </CommandItem>
                );
              })}
            </CommandList>

The issue lies in CommandItem. Just to test, if I replace the CommandItemwith a <div> it renders correctly all the suggestions. But I have a case where the suggestions has 2 items and only 1 is rendering.

After I select the only one that is visible, if I then click again to filter, both are visible.

Both key and value are unique to each CommandItem throughout the suggestions

EDIT: Actually managed to fix my issue using "shouldFilter={false}" on the <Command> tag.

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