diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index 3f1d16cdade..3782d2f92ae 100644 --- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx @@ -7,6 +7,7 @@ import React, { type ComponentType, type ComponentPropsWithoutRef, type ReactElement, + useCallback, } from 'react'; import { css } from 'glamor'; @@ -135,6 +136,21 @@ function CategoryList({ ); } +function customSort(obj: CategoryAutocompleteItem, value: string): number { + const name = obj.name.toLowerCase(); + const groupName = obj.group ? obj.group.name.toLowerCase() : ''; + if (obj.id === 'split') { + return -2; + } + if (name.includes(value)) { + return -1; + } + if (groupName.includes(value)) { + return 0; + } + return 1; +} + type CategoryAutocompleteProps = ComponentProps< typeof Autocomplete > & { @@ -183,6 +199,33 @@ export function CategoryAutocomplete({ [defaultCategoryGroups, categoryGroups, showSplitOption], ); + const filterSuggestions = useCallback( + ( + suggestions: CategoryAutocompleteItem[], + value: string, + ): CategoryAutocompleteItem[] => { + return suggestions + .filter(suggestion => { + return ( + suggestion.id === 'split' || + suggestion.group?.name + .toLowerCase() + .includes(value.toLowerCase()) || + (suggestion.group?.name + ' ' + suggestion.name) + .toLowerCase() + .includes(value.toLowerCase()) || + defaultFilterSuggestion(suggestion, value) + ); + }) + .sort( + (a, b) => + customSort(a, value.toLowerCase()) - + customSort(b, value.toLowerCase()), + ); + }, + [], + ); + return ( { - return suggestions.filter(suggestion => { - return ( - suggestion.id === 'split' || - defaultFilterSuggestion(suggestion, value) - ); - }); - }} + filterSuggestions={filterSuggestions} suggestions={categorySuggestions} renderItems={(items, getItemProps, highlightedIndex) => ( { items = screen .getByTestId('autocomplete') .querySelectorAll('[data-testid$="category-item"]'); - expect(items.length).toBe(0); + expect(items.length).toBe(3); }); test('dropdown selects an item with keyboard', async () => { diff --git a/upcoming-release-notes/2861.md b/upcoming-release-notes/2861.md new file mode 100644 index 00000000000..773373e9b91 --- /dev/null +++ b/upcoming-release-notes/2861.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [Crazypkr] +--- + +Add autocomplete to include categories underneath the prioritized subcategory \ No newline at end of file