🔧 fix(menu): Menu Item Filter Improvements (#2153)

* small-fix: Ensure that fake seperators in model lists do not show in search

* Ensure Plugin search uses correct placeholder and key filtering in search
This commit is contained in:
Flynn 2024-03-21 09:15:25 -04:00 committed by GitHub
parent 30f6d90cfe
commit f521040784
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 33 additions and 9 deletions

View file

@ -18,6 +18,7 @@ export type TMultiSelectDropDownProps = {
containerClassName?: string;
isSelected: (value: string) => boolean;
className?: string;
searchPlaceholder?: string;
optionValueKey?: string;
};
@ -32,6 +33,7 @@ function MultiSelectDropDown({
containerClassName,
isSelected,
className,
searchPlaceholder,
optionValueKey = 'value',
}: TMultiSelectDropDownProps) {
const [isOpen, setIsOpen] = useState(false);
@ -44,10 +46,13 @@ function MultiSelectDropDown({
setIsOpen(true);
};
// Detemine if we should to convert this component into a searchable select. If we have enough elements, a search
// input will appear near the top of the menu, allowing correct filtering of different model menu items. This will
// reset once the component is unmounted (as per a normal search)
const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>(availableValues);
const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>(
availableValues,
searchPlaceholder,
(option) => (option.name || '').toUpperCase(),
);
const hasSearchRender = Boolean(searchRender);
const options = hasSearchRender ? filteredValues : availableValues;