Fix Split Categories (#291)

* Add tests for transaction category state and split editor functionality

* Bump version to 2.6.1 in package.json

* Update CHANGELOG for version 2.6.1 with fixes for split-category behavior and transaction modal

Author: jwaspin

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.6.1] - 2026-04-03
+
+### Fixed
+
+- Fixed ledger split-category behavior so split transactions participate correctly in ledger category filtering, uncategorized views, and invalid-category cleanup.
+- Fixed the split transaction modal to preserve in-progress edits instead of resetting split rows while the dialog is open.
+- Fixed the split transaction amount field so partial decimal values can be entered and edited naturally without forced reformatting on every keystroke.
+
 ## [2.6.0] - 2026-04-03
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "luca-ledger",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "homepage": "https://lucaledger.app/",
   "type": "module",
   "license": "MIT",

src/__tests__/components/useSplitEditor.test.jsx

@@ -0,0 +1,116 @@
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { reducer as transactionSplitsReducer } from '@/store/transactionSplits';
+import { useSplitEditor } from '@/components/SplitEditorModal/hooks/useSplitEditor';
+
+const transaction = {
+  id: '11111111-1111-1111-1111-111111111111',
+  amount: -2500,
+  categoryId: '22222222-2222-2222-2222-222222222222',
+};
+
+describe('useSplitEditor', () => {
+  let container = null;
+  let root = null;
+
+  afterEach(async () => {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+      });
+      root = null;
+    }
+
+    if (container) {
+      container.remove();
+      container = null;
+    }
+  });
+
+  it('preserves local split edits while the modal is open', async () => {
+    const store = configureStore({
+      reducer: {
+        transactionSplits: transactionSplitsReducer,
+      },
+    });
+
+    let latestHookState = null;
+
+    function TestComponent() {
+      latestHookState = useSplitEditor(true, transaction);
+      return null;
+    }
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root.render(
+        <Provider store={store}>
+          <TestComponent />
+        </Provider>,
+      );
+    });
+
+    expect(latestHookState.splits).toHaveLength(1);
+
+    await act(async () => {
+      latestHookState.handleAddSplit();
+    });
+
+    expect(latestHookState.splits).toHaveLength(2);
+    expect(latestHookState.splits[0].amount).toBe(2500);
+    expect(latestHookState.splits[1].amount).toBe(0);
+    expect(latestHookState.amountInputs[latestHookState.splits[0].id]).toBe(
+      '25.00',
+    );
+    expect(latestHookState.amountInputs[latestHookState.splits[1].id]).toBe('');
+  });
+
+  it('preserves partial decimal input while updating numeric cents', async () => {
+    const store = configureStore({
+      reducer: {
+        transactionSplits: transactionSplitsReducer,
+      },
+    });
+
+    let latestHookState = null;
+
+    function TestComponent() {
+      latestHookState = useSplitEditor(true, transaction);
+      return null;
+    }
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root.render(
+        <Provider store={store}>
+          <TestComponent />
+        </Provider>,
+      );
+    });
+
+    const splitId = latestHookState.splits[0].id;
+
+    await act(async () => {
+      latestHookState.handleAmountChange(splitId, '12.');
+    });
+
+    expect(latestHookState.amountInputs[splitId]).toBe('12.');
+    expect(latestHookState.splits[0].amount).toBe(1200);
+
+    await act(async () => {
+      latestHookState.handleAmountChange(splitId, '.5');
+    });
+
+    expect(latestHookState.amountInputs[splitId]).toBe('.5');
+    expect(latestHookState.splits[0].amount).toBe(50);
+  });
+});

src/__tests__/utils/transactionCategoryState.test.js

@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildCategoriesById,
+  buildSplitsByTransactionId,
+  hasTransactionInvalidCategories,
+  isTransactionUncategorized,
+  transactionMatchesCategoryFilter,
+} from '@/utils/transactionCategoryState';
+
+const categories = [
+  { id: 'food', name: 'Food', parentId: null },
+  { id: 'groceries', name: 'Groceries', parentId: 'food' },
+  { id: 'utilities', name: 'Utilities', parentId: null },
+];
+
+describe('transactionCategoryState', () => {
+  it('treats split categories as the authoritative ledger category', () => {
+    const transaction = {
+      id: 'txn-1',
+      categoryId: 'deleted-category',
+    };
+    const categoriesById = buildCategoriesById(categories);
+    const splitsByTransaction = buildSplitsByTransactionId([
+      {
+        id: 'split-1',
+        transactionId: 'txn-1',
+        categoryId: 'groceries',
+        amount: 1250,
+      },
+    ]);
+
+    expect(
+      transactionMatchesCategoryFilter(
+        transaction,
+        'groc',
+        categoriesById,
+        splitsByTransaction,
+      ),
+    ).toBe(true);
+    expect(
+      transactionMatchesCategoryFilter(
+        transaction,
+        'food',
+        categoriesById,
+        splitsByTransaction,
+      ),
+    ).toBe(true);
+    expect(
+      transactionMatchesCategoryFilter(
+        transaction,
+        'util',
+        categoriesById,
+        splitsByTransaction,
+      ),
+    ).toBe(false);
+    expect(
+      hasTransactionInvalidCategories(
+        transaction,
+        categoriesById,
+        splitsByTransaction,
+      ),
+    ).toBe(false);
+  });
+
+  it('does not count fully categorized split transactions as uncategorized', () => {
+    const transaction = {
+      id: 'txn-2',
+      categoryId: null,
+    };
+    const splitsByTransaction = buildSplitsByTransactionId([
+      {
+        id: 'split-2',
+        transactionId: 'txn-2',
+        categoryId: 'groceries',
+        amount: 500,
+      },
+      {
+        id: 'split-3',
+        transactionId: 'txn-2',
+        categoryId: 'utilities',
+        amount: 500,
+      },
+    ]);
+
+    expect(isTransactionUncategorized(transaction, splitsByTransaction)).toBe(
+      false,
+    );
+  });
+
+  it('flags partially categorized splits as uncategorized', () => {
+    const transaction = {
+      id: 'txn-3',
+      categoryId: null,
+    };
+    const splitsByTransaction = buildSplitsByTransactionId([
+      {
+        id: 'split-4',
+        transactionId: 'txn-3',
+        categoryId: 'groceries',
+        amount: 500,
+      },
+      {
+        id: 'split-5',
+        transactionId: 'txn-3',
+        categoryId: null,
+        amount: 500,
+      },
+    ]);
+
+    expect(isTransactionUncategorized(transaction, splitsByTransaction)).toBe(
+      true,
+    );
+  });
+
+  it('still falls back to the primary category when no splits exist', () => {
+    const transaction = {
+      id: 'txn-4',
+      categoryId: 'utilities',
+    };
+    const categoriesById = buildCategoriesById(categories);
+    const splitsByTransaction = buildSplitsByTransactionId([]);
+
+    expect(
+      transactionMatchesCategoryFilter(
+        transaction,
+        'util',
+        categoriesById,
+        splitsByTransaction,
+      ),
+    ).toBe(true);
+    expect(
+      isTransactionUncategorized(transaction, splitsByTransaction),
+    ).toBe(false);
+  });
+});

src/components/LedgerRow/CategoryCell.jsx

@@ -23,8 +23,12 @@ export default function CategoryCell({ transaction, isSelected }) {
   const dispatch = useDispatch();
   const [modalOpen, setModalOpen] = useState(false);
   const categories = useSelector(categorySelectors.selectAllCategories);
+  const selectTransactionSplits = useMemo(
+    () => transactionSplitSelectors.selectSplitsByTransactionId(transaction.id),
+    [transaction.id],
+  );
   const transactionSplits = useSelector(
-    transactionSplitSelectors.selectSplitsByTransactionId(transaction.id),
+    selectTransactionSplits,
   );
 
   const hasSplits = transactionSplits.length > 0;
@@ -114,4 +118,3 @@ export default function CategoryCell({ transaction, isSelected }) {
     </>
   );
 }
-

src/components/LedgerTable/LedgerTable.jsx

@@ -4,6 +4,7 @@ import {
   selectors as accountSelectors,
 } from '@/store/accounts';
 import { selectors as transactionSelectors } from '@/store/transactions';
+import { selectors as transactionSplitSelectors } from '@/store/transactionSplits';
 import { selectors as categorySelectors } from '@/store/categories';
 import { selectors as statementSelectors } from '@/store/statements';
 import { selectors as recurringTransactionSelectors } from '@/store/recurringTransactions';
@@ -22,6 +23,12 @@ import {
 import { Fragment, useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
+import {
+  buildCategoriesById,
+  buildSplitsByTransactionId,
+  isTransactionUncategorized,
+  transactionMatchesCategoryFilter,
+} from '@/utils/transactionCategoryState';
 import LedgerHeader from './LedgerHeader';
 import SeparatorRow from './SeparatorRow';
 import StatementSeparatorRow from './StatementSeparatorRow';
@@ -46,6 +53,9 @@ export default function LedgerTable({
   const transactions = useSelector(selectAccountTransactions);
 
   const categories = useSelector(categorySelectors.selectAllCategories);
+  const transactionSplits = useSelector(
+    transactionSplitSelectors.selectTransactionSplits,
+  );
   const accountStatements = useSelector(
     statementSelectors.selectStatementsByAccountId(accountId),
   );
@@ -60,6 +70,14 @@ export default function LedgerTable({
   const recurringProjection = useSelector(
     settingsSelectors.selectRecurringProjection,
   );
+  const categoriesById = useMemo(
+    () => buildCategoriesById(categories),
+    [categories],
+  );
+  const splitsByTransaction = useMemo(
+    () => buildSplitsByTransactionId(transactionSplits),
+    [transactionSplits],
+  );
 
   // Generate virtual transactions from recurring rules
   const virtualTransactions = useMemo(() => {
@@ -116,7 +134,9 @@ export default function LedgerTable({
 
     // Apply uncategorized filter
     if (showUncategorizedOnly) {
-      filtered = filtered.filter((transaction) => !transaction.categoryId);
+      filtered = filtered.filter((transaction) =>
+        isTransactionUncategorized(transaction, splitsByTransaction),
+      );
     }
 
     // Apply text filter
@@ -128,27 +148,17 @@ export default function LedgerTable({
           .toLowerCase()
           .includes(lowerFilter);
 
-        // Check category name
-        const category = categories.find(
-          (cat) => cat.id === transaction.categoryId,
+        const matchesCategory = transactionMatchesCategoryFilter(
+          transaction,
+          filterValue,
+          categoriesById,
+          splitsByTransaction,
         );
-        const matchesCategory = category?.name
-          .toLowerCase()
-          .includes(lowerFilter);
-
-        // Check parent category name if this is a subcategory
-        const parentCategory = category?.parentId
-          ? categories.find((cat) => cat.id === category.parentId)
-          : null;
-        const matchesParentCategory = parentCategory?.name
-          .toLowerCase()
-          .includes(lowerFilter);
 
         // Include if matches description, category, parent category, or is already selected
         return (
           matchesDescription ||
           matchesCategory ||
-          matchesParentCategory ||
           selectedTransactions.has(transaction.id)
         );
       });
@@ -161,7 +171,8 @@ export default function LedgerTable({
     transactionsWithBalance,
     selectedTransactions,
     selectedYear,
-    categories,
+    categoriesById,
+    splitsByTransaction,
   ]);
 
   const toggleGroupCollapse = (groupId) => {
@@ -589,4 +600,3 @@ export default function LedgerTable({
     </TableContainer>
   );
 }
-