@kahitsan/ksui 0.47.1 → 0.47.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.47.1",
+  "version": "0.47.2",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/composite/TransactionForm.payee-tin.test.tsx

@@ -2,7 +2,8 @@
 // and address, offers inputs when they are missing, and warns when withholding
 // is on but no TIN is known.
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { render, fireEvent, waitFor, screen } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
 import TransactionForm, { type TransactionFormProps } from "./TransactionForm";
 import { isValidTin } from "./payee-tin";
 
@@ -225,4 +226,51 @@ describe("TransactionForm payee tax ID", () => {
     await Promise.resolve();
     expect(queryByTestId("form-payee-tin-input")).toBeNull();
   });
+
+  it("shows the newly picked payee's tax ID when switching payees", async () => {
+    const payees = [
+      { id: 1, name: "Alpha Mart", kind: "vendor", tin: "123-456-789-00043", address: "1 Main St" },
+      { id: 2, name: "Beta Shop", kind: "vendor", tin: null, address: null },
+    ];
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (url: string) => {
+        const one = /\/api\/payees\/(\d+)/.exec(String(url));
+        const body = one ? payees.find((p) => p.id === Number(one[1])) : { data: payees };
+        return new Response(JSON.stringify(body), { status: 200 });
+      }),
+    );
+    const [payee, setPayee] = createSignal("");
+    const [payeeId, setPayeeId] = createSignal<number | null>(null);
+    const { findByTestId, queryByTestId } = render(() => (
+      <TransactionForm
+        {...tinProps({
+          get payee() {
+            return payee();
+          },
+          setPayee,
+          get payeeId() {
+            return payeeId();
+          },
+          setPayeeId,
+        })}
+      />
+    ));
+    const pick = async (id: number) => {
+      fireEvent.click(await screen.findByTestId("form-payee-picker-trigger"));
+      fireEvent.input(await screen.findByTestId("form-payee-picker-input"), { target: { value: "a" } });
+      fireEvent.click(await screen.findByTestId(`form-payee-picker-result-${id}`));
+    };
+
+    await pick(1);
+    expect((await findByTestId("form-payee-tin-readonly")).textContent).toContain("123-456-789-00043");
+
+    await pick(2);
+    await findByTestId("form-payee-tin-input");
+    expect(queryByTestId("form-payee-tin-readonly")).toBeNull();
+
+    await pick(1);
+    expect((await findByTestId("form-payee-tin-readonly")).textContent).toContain("123-456-789-00043");
+    expect(queryByTestId("form-payee-tin-input")).toBeNull();
+  });
 });

package/src/components/composite/TransactionForm.tsx

@@ -7,7 +7,7 @@
 // advanced-fields toggle entirely, for a caller that locks `category` to one
 // value and never needs EWT/sharing (e.g. a "record my own expense" surface).
 
-import { createEffect, createSignal, Show, For } from "solid-js";
+import { batch, createEffect, createSignal, Show, For } from "solid-js";
 import X from "lucide-solid/icons/x";
 import Upload from "lucide-solid/icons/upload";
 import FileIcon from "lucide-solid/icons/file";
@@ -788,13 +788,16 @@ export default function TransactionForm(props: TransactionFormProps) {
                   icon={Store}
                   noun="payee"
                   placeholder={catConfig().payeePlaceholder!}
-                  onChange={(p) => {
-                    setSelectedPayee(p);
-                    props.setPayee(p ? p.name : "");
-                    props.setPayeeId(p ? p.id : null);
-                    props.setPayeeTin?.("");
-                    props.setPayeeAddress?.("");
-                  }}
+                  onChange={(p) =>
+                    // One batch so the sync effect never sees the new name with the old id.
+                    batch(() => {
+                      setSelectedPayee(p);
+                      props.setPayee(p ? p.name : "");
+                      props.setPayeeId(p ? p.id : null);
+                      props.setPayeeTin?.("");
+                      props.setPayeeAddress?.("");
+                    })
+                  }
                 />
               </FormField>
               <FormField label={props.category === "sale" ? "Invoice ID" : "Receipt / Ref #"}>