Open jaxxreal opened 3 months ago
Maybe exposing the store object to control the value stored can be a solution, +1 checked this on chrome and firefox
Same issue for me did you find a solution ?
Found a workaround, you can add a Key to the CommandList. When the key changes, the component is fully rerendered.
For me i added the query as the key. Everytime the query changes, the command is fully rerendered with the right selected first item.
Found a workaround, you can add a Key to the CommandList. When the key changes, the component is fully rerendered.
For me i added the query as the key. Everytime the query changes, the command is fully rerendered with the right selected first item.
Hello! I just applied changes to the example I've attached but I see no changes in behavior. Am I doing something wrong?
For your case II add to put the key at the command level : <Command className="rounded-lg border shadow-md" shouldFilter={false} loop key={isLoading.toString().concat(q)}
the general idea is that id a key element is changed, the element will be fuly rerender after a state change. In my case the results list are in a children component. Rerendering this component was enought for my use case. You need to also include the isloading with Q because you want a full rerender when is transition from loading to not loading. This is a woraround, not a best practice
If it helps, I had to add autoFocus
to the <CommandInput>
to stop input losing focus on re-render.
Issue description
When content of
Command.List
is dynamic eg rendering result of a search API endpoint results the first item is not always selected by default.In case I am doing something wrong, please let me know.
Setup
shadcn's Command component, cmdk@1.0.0
Repro
Repro steps for stackblitz template I drafted up.
Expected:
Add <query>
item appears - it's highlighted since it's the first item in the listActual:
Add <query>
item appears - it's NOT highlightedEDIT: bringing code sample here, just in case