Add filtering of group name to autocomplete for transactions

packages/desktop-client/src/components/autocomplete/Autocomplete.tsx

@@ -302,6 +302,27 @@ function SingleAutocomplete<T extends Item>({
 
   const filtered = isChanged ? filteredSuggestions || suggestions : suggestions;
 
+  function customSort(obj, value) {
+    const name = obj.name.toLowerCase();
+    const groupName = obj.group ? obj.group.name.toLowerCase() : '';
+    value = value.toLowerCase();
+
+    if (obj.id === 'split') {
+      return -2;
+    }
+    if (name.includes(value)) {
+      return -1;
+    }
+    if (groupName.includes(value)) {
+      return 0;
+    }
+    return 1;
+  }
+
+  if (isChanged) {
+    filtered.sort((a, b) => customSort(a, value) - customSort(b, value));
+  }
+
   return (
     <Downshift
       onSelect={(item, { inputValue }) => {

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -69,15 +69,13 @@ function CategoryList({
   showBalances,
 }: CategoryListProps) {
   let lastGroup: string | undefined | null = null;
-
   const filteredItems = useMemo(
     () =>
       showHiddenItems
         ? items
         : items.filter(item => !item.hidden && !item.group?.hidden),
     [showHiddenItems, items],
   );
-
   return (
     <View>
       <View
@@ -100,6 +98,7 @@ function CategoryList({
           const showGroup = item.cat_group !== lastGroup;
           const groupName = `${item.group?.name}${item.group?.hidden ? ' (hidden)' : ''}`;
           lastGroup = item.cat_group;
+
           return (
             <Fragment key={item.id}>
               {showGroup && item.group?.name && (
@@ -121,7 +120,9 @@ function CategoryList({
                   embedded,
                   style: {
                     ...(showHiddenItems &&
-                      item.hidden && { color: theme.pageTextSubdued }),
+                      item.hidden && {
+                        color: theme.pageTextSubdued,
+                      }),
                   },
                   showBalances,
                 })}
@@ -201,24 +202,29 @@ export function CategoryAutocomplete({
         return suggestions.filter(suggestion => {
           return (
             suggestion.id === 'split' ||
+            suggestion.group?.name
+              .toLowerCase()
+              .includes(value.toLowerCase()) ||
             defaultFilterSuggestion(suggestion, value)
           );
         });
       }}
       suggestions={categorySuggestions}
-      renderItems={(items, getItemProps, highlightedIndex) => (
-        <CategoryList
-          items={items}
-          embedded={embedded}
-          getItemProps={getItemProps}
-          highlightedIndex={highlightedIndex}
-          renderSplitTransactionButton={renderSplitTransactionButton}
-          renderCategoryItemGroupHeader={renderCategoryItemGroupHeader}
-          renderCategoryItem={renderCategoryItem}
-          showHiddenItems={showHiddenCategories}
-          showBalances={showBalances}
-        />
-      )}
+      renderItems={(items, getItemProps, highlightedIndex) => {
+        return (
+          <CategoryList
+            items={items}
+            embedded={embedded}
+            getItemProps={getItemProps}
+            highlightedIndex={highlightedIndex}
+            renderSplitTransactionButton={renderSplitTransactionButton}
+            renderCategoryItemGroupHeader={renderCategoryItemGroupHeader}
+            renderCategoryItem={renderCategoryItem}
+            showHiddenItems={showHiddenCategories}
+            showBalances={showBalances}
+          />
+        );
+      }}
       {...props}
     />
   );

packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx

@@ -468,7 +468,7 @@ describe('Transactions', () => {
     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 () => {

upcoming-release-notes/2861.md

@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [Crazypkr]
+---
+
+Add autocomplete to include categories underneath the prioritized subcategory