Search by Category Including Subcategory

- Added a new option switch to have the category autocomplete match on category group names

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

@@ -166,6 +166,9 @@ export function CategoryAutocomplete({
   ...props
 }: CategoryAutocompleteProps) {
   const { grouped: defaultCategoryGroups = [] } = useCategories();
+  const [autocompleteCategoryMatchGroup = false] = useLocalPref(
+    'autocompleteCategoryMatchGroup',
+  );
   const categorySuggestions: CategoryAutocompleteItem[] = useMemo(
     () =>
       (categoryGroups || defaultCategoryGroups).reduce(
@@ -201,7 +204,10 @@ export function CategoryAutocomplete({
         return suggestions.filter(suggestion => {
           return (
             suggestion.id === 'split' ||
-            defaultFilterSuggestion(suggestion, value)
+            defaultFilterSuggestion(suggestion, value) ||
+            (autocompleteCategoryMatchGroup &&
+              suggestion.group &&
+              defaultFilterSuggestion(suggestion.group, value))
           );
         });
       }}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useLocalPref } from '../../hooks/useLocalPref';
+import { Text } from '../common/Text';
+import { Checkbox } from '../forms';
+
+import { Setting } from './UI';
+
+export function AutocompleteSettings() {
+  const [
+    autocompleteCategoryMatchGroup = false,
+    setAutocompleteCategoryMatchGroupPref,
+  ] = useLocalPref('autocompleteCategoryMatchGroup');
+
+  return (
+    <Setting
+      primaryAction={
+        <Text style={{ display: 'flex' }}>
+          <Checkbox
+            id="settings-autocompleteCategoryMatchGroup"
+            checked={!!autocompleteCategoryMatchGroup}
+            onChange={e =>
+              setAutocompleteCategoryMatchGroupPref(e.currentTarget.checked)
+            }
+          />
+          <label htmlFor="settings-autocompleteCategoryMatchGroup">
+            Category autocomplete search match on category group names
+          </label>
+        </Text>
+      }
+    >
+      <Text>
+        <strong>Autocomplete</strong> change the behavior of the autocomplete
+        dropdowns.
+      </Text>
+    </Setting>
+  );
+}

packages/desktop-client/src/components/settings/index.tsx

@@ -22,6 +22,7 @@ import { FormField, FormLabel } from '../forms';
 import { Page } from '../Page';
 import { useServerVersion } from '../ServerContext';
 
+import { AutocompleteSettings } from './Autocomplete';
 import { EncryptionSettings } from './Encryption';
 import { ExperimentalFeatures } from './Experimental';
 import { ExportBudget } from './Export';
@@ -174,6 +175,7 @@ export function Settings() {
 
         <AdvancedToggle>
           <AdvancedAbout />
+          <AutocompleteSettings />
           <ResetCache />
           <ResetSync />
           <FixSplits />

packages/loot-core/src/types/prefs.d.ts

@@ -55,6 +55,7 @@ export type LocalPrefs = Partial<
     reportsViewSummary: boolean;
     reportsViewLabel: boolean;
     'mobile.showSpentColumn': boolean;
+    autocompleteCategoryMatchGroup: boolean;
   } & Record<`flags.${FeatureFlag}`, boolean>
 >;
 

upcoming-release-notes/2731.md

@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [Wizmaster]
+---
+Add option to have the Category autocomplete match on Category Group names