fix(InputNumber.tsx): preserve leading zeros; fix test (#113)

Author: shiplet

src/antd/InputNumber.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react"
+import { useCallback, useRef } from "react"
 import { ControlProps, RendererProps } from "@jsonforms/core"
 import { InputNumber as AntdInputNumber } from "antd"
 import { NumericControlOptions } from "../ui-schema"
@@ -12,12 +12,16 @@ import {
 type AntdInputNumberProps = React.ComponentProps<typeof AntdInputNumber>
 type InputNumberProps = AntdInputNumberProps & RendererProps & ControlProps
 
+const hasLeadingZero = (value?: string) =>
+  value && value.substring(0, 1) === "0"
+
 export function InputNumber({
   handleChange,
   path,
   schema,
   ...props
 }: InputNumberProps) {
+  const incomingValue = useRef<string>()
   const ariaLabel = props.label || schema.description || "Value"
 
   const defaultValue = schema.default as number | undefined
@@ -71,6 +75,18 @@ export function InputNumber({
   // TODO: Revist useCallback use - was meant to prevent re-renders
   const formatter = useCallback(
     (value?: string | number): string => {
+      /**
+       * See block comment in `parser()` below.
+       */
+      if (
+        value &&
+        typeof incomingValue.current === "string" &&
+        hasLeadingZero(incomingValue.current) &&
+        !isNaN(parseFloat(incomingValue.current))
+      ) {
+        return incomingValue.current
+      }
+
       if (value !== "" && value !== undefined) {
         if (isPercentage) {
           const valueFloat =
@@ -87,6 +103,21 @@ export function InputNumber({
   // TODO: Revist useCallback use - was meant to prevent re-renders
   const parser = useCallback(
     (value?: string): number | undefined => {
+      /**
+       * When a parser & formatter are both present it triggers a
+       * double-render of the wrapped AntD InputNumber. This double-render
+       * also triggers a double-set of the incoming value, which will format
+       * and remove leading zeros. We'd like to preserve those leading zeros
+       * if they're part of a valid number, because a user may simply want
+       * to update a value like 30000 to 300 without having to retype the full
+       * number.
+       *
+       * The incomingValue.current ref updates on every input value which allows
+       * the subsequent formatter call to access the raw value and make decisions
+       * based on whether or not it has a leading zero, while avoiding
+       * any async issues caused by needing to set or wait for state changes.
+       */
+      incomingValue.current = value
       const isNumeric = value ? !isNaN(Number(value)) : false
       if (isNumeric && value !== undefined) {
         if (isPercentage) {

src/controls/NumericControl.test.tsx

@@ -13,6 +13,7 @@ import {
   numericUISchemaWithRule,
   numericPriceSchema,
   numericUSDUISchema,
+  numericLeadingZerosSchema,
 } from "../testSchemas/numericSchema"
 import { JSONFormData } from "../common/schema-derived-types"
 
@@ -164,4 +165,25 @@ describe("NumericControl", () => {
       expect(input).toHaveValue("123") // it should be rounded to an integer
     },
   )
+
+  it("preserves leading zeros on valid numerical inputs", async () => {
+    render({
+      schema: numericLeadingZerosSchema,
+    })
+
+    const input = screen.getByRole("spinbutton")
+    expect(input).toHaveValue("3000")
+
+    await userEvent.click(input)
+    await userEvent.keyboard(
+      "[ArrowLeft][ArrowLeft][ArrowLeft][ArrowLeft][Delete]",
+    )
+    expect(input).toHaveValue("000")
+
+    await userEvent.keyboard("5")
+    expect(input).toHaveValue("5000")
+
+    await userEvent.keyboard("[ArrowRight][ArrowRight]a")
+    expect(input).toHaveValue("")
+  })
 })

src/controls/ObjectArrayControl.test.tsx

@@ -164,7 +164,7 @@ describe("ObjectArrayControl", () => {
 
     await screen.findByText("Asset")
     await userEvent.click(screen.getByText("Destroy me!"))
-    await screen.findByText("No data")
+    await screen.findAllByText("No data")
   })
   test("Object Array ensures one default item exists in the list if subschema is a combinator", async () => {
     strictRender({

src/testSchemas/numericSchema.ts

@@ -25,6 +25,17 @@ export const numericTheNumberSchema = {
   required: ["numericValue"],
 } satisfies JSONSchema
 
+export const numericLeadingZerosSchema = {
+  type: "object",
+  properties: {
+    numericValue: {
+      title: "Leading Zeros",
+      type: "number",
+      default: "3000",
+    },
+  },
+} satisfies JSONSchema
+
 export const numericWeightSchema = {
   type: "object",
   properties: {