Fix clearing planning mode input (#38)

Author: Blacksmoke16

.nvmrc

@@ -1 +1 @@
-v22
+v24

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.3.1] - 2026-01-01
+
+### Fixed
+
+- Fix planning mode input not clearing on select-all + delete (George Dietrich)
+
+[0.3.1]: https://github.com/blacksmoke16/rebalancer/releases/tag/v0.3.1
+
 ## [0.3.0] - 2025-12-20
 
 ### Added

README.md

@@ -18,7 +18,7 @@ A privacy-focused portfolio rebalancing tool that helps you optimize your invest
 
 ### Prerequisites
 
-- Node.js 22+
+- Node.js 24+
 - npm
 
 ### Getting Started

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "rebalancer",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "license": "MIT",
   "scripts": {

package.json

@@ -54,7 +54,7 @@ export const FundDataRow = memo<FundDataRowProps>(function FundDataRow({
                 <NumberField
                   isCurrency
                   allowNegative
-                  value={pendingChange === 0 ? undefined : pendingChange}
+                  value={pendingChange === 0 ? "" : pendingChange}
                   placeholder={`Current: $${currentValue.toLocaleString()}`}
                   data-testid={`${fund.ticker}-${account.name}-pending-value`}
                   onValueChange={(value) => {

src/components/ui/FundDataRow.tsx

@@ -1,7 +1,7 @@
 import { NumberInput, NumberInputProps } from "@mantine/core";
+import type { NumberFormatValues } from "react-number-format";
 import { useCallback } from "react";
 import { FORMATTING, UI } from "../../constants";
-import { validation } from "../../utils/validation";
 
 interface NumberFieldProps
   extends Omit<NumberInputProps, "onBlur" | "onValueChange"> {
@@ -22,14 +22,11 @@ export function NumberField({
   ...props
 }: NumberFieldProps) {
   const handleValueChange = useCallback(
-    (value: string | number): void => {
+    (values: NumberFormatValues): void => {
       if (!onValueChange) return;
-
-      const parsedValue =
-        typeof value === "string" ? validation.parseAmount(value) : value || 0;
+      let finalValue = values.floatValue ?? 0;
 
       // Apply constraints based on field type
-      let finalValue = parsedValue;
       if (!allowNegative && finalValue < 0) {
         finalValue = 0;
       }
@@ -49,7 +46,7 @@ export function NumberField({
       allowDecimal={false}
       thousandSeparator={thousandSeparator}
       leftSection={finalLeftSection}
-      onChange={handleValueChange}
+      onValueChange={handleValueChange}
       size={size}
       {...props}
     />

src/components/ui/NumberField.tsx

@@ -280,4 +280,34 @@ test.describe("Planning Mode", () => {
     await expect(page.getByText("Projected ($)")).toBeVisible();
     await expect(page.getByText("Projected (%)")).toBeVisible();
   });
+
+  test("Clear Input - Select All and Delete clears value completely", async ({
+    page,
+  }) => {
+    // 1. Navigate to Portfolio page and enter planning mode
+    await page.goto("http://localhost:5173");
+    await page.getByRole("link", { name: "Portfolio" }).click();
+    await page.getByRole("button", { name: "Plan Transactions" }).click();
+
+    const input = page.getByTestId("VTI-401k-pending-value");
+
+    // 2. Type a negative value character by character (to trigger formatting)
+    await input.click();
+    await page.keyboard.type("-3210");
+    await expect(page.getByText("Unaccounted Sales")).toBeVisible();
+
+    // 3. Select all (Ctrl+A) and delete
+    await input.focus();
+    await page.keyboard.press("Control+a");
+    await page.keyboard.press("Backspace");
+
+    // 4. Verify input is cleared
+    await expect(input).toHaveValue("");
+
+    // 5. Verify state returns to initial (no pending changes)
+    await expect(page.getByText("Planning Mode Active")).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Apply Changes" }),
+    ).toBeDisabled();
+  });
 });