fix(webui): resolve cmdk filtering issue preventing search history display

- Fix AsyncSelect component where cmdk's internal filtering was hiding search history items
- Change CommandItem value logic: use empty string when searchTerm is empty to match cmdk's filtering behavior
- Ensure search history displays correctly on initial load regardless of current queryLabel value
- Maintain proper selected state indication and all existing functionality
- Preserve normal search behavior when user types in search input

Fixes issue where dropdown only showed "*" and current queryLabel instead of full search history from localStorage.
This commit is contained in:
yangdx 2025-09-20 14:35:41 +08:00
parent da30529585
commit 55b4716bac

View file

@ -248,21 +248,18 @@ export function AsyncSelect<T>({
</CommandEmpty>
))}
<CommandGroup>
{options.map((option, index) => {
{options.map((option) => {
const optionValue = getOptionValue(option);
// Use index as a safe value that won't be trimmed by cmdk
const safeValue = `option-${index}-${optionValue.length}`;
// Fix cmdk filtering issue: use empty string when search is empty
// This ensures all items are shown when searchTerm is empty
const itemValue = searchTerm.trim() === '' ? '' : optionValue;
return (
<CommandItem
key={optionValue}
value={safeValue}
onSelect={(selectedSafeValue) => {
// Extract the original value from the safe value
const selectedIndex = parseInt(selectedSafeValue.split('-')[1]);
const originalValue = getOptionValue(options[selectedIndex]);
console.log(`CommandItem onSelect: safeValue='${selectedSafeValue}', originalValue='${originalValue}' (length: ${originalValue.length})`);
handleSelect(originalValue);
value={itemValue}
onSelect={() => {
handleSelect(optionValue);
}}
className="truncate"
>