bug: When items are added to the <Command/> while searching items are not rendered as expected

[ieedan]

Describe the bug

Comes from huntabyte/shadcn-svelte#1562

From what I can tell is that since the item hasn't been added to the DOM yet there is no ref and because there is no ref the value isn't set and when the value isn't set the filter items doesn't include the item and then shouldRender is left false preventing you from rendering the item. This is why as soon as you remove the search input it renders with no issues.

A workaround is to just set shouldFilter to false on the <Command.Root/> component and do your own filtering.

repro.mp4

Reproduction

https://github.com/ieedan/bits-ui/tree/command-troubleshooting

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i7-12850HX
    Memory: 7.78 GB / 31.61 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE   
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD     
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD      
    pnpm: 9.12.3 - ~\AppData\Local\pnpm\pnpm.EXE       
    bun: 1.1.38 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (128.0.2739.67)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    svelte: ^5.16.0 => 5.16.0

Severity

annoyance

[huntabyte]

Alright, I've got the async Command.Items rocking and rolling in a branch. I'm now working on async groups and items because as I figured, groups will have a similar issue.