fix(EnumControl, DateTimeControl): remove manual AntD statemanagement (#143)

* Remove form.setFieldValue call from EnumControl

* Remove form.setFieldValue call from DateTimeControl

* Backfill tests

* Add stories

* Move Col use outside of Form.Item

* Add stories

* Remove nested Col

* Formatting

* Revert Col changes in NumericControl

* Remove unneeded type narrowing

* Minor readability improvement

Author: tyler-hoffman

src/controls/DateTimeControl.tsx

@@ -1,7 +1,7 @@
-import { memo, useEffect } from "react"
+import { memo } from "react"
 import type { ControlProps as JSFControlProps } from "@jsonforms/core"
 import { withJsonFormsControlProps } from "@jsonforms/react"
-import { DatePicker, Form } from "antd"
+import { Col, DatePicker, Form } from "antd"
 import type { Rule } from "antd/es/form"
 import dayjs from "dayjs"
 
@@ -10,6 +10,7 @@ import {
   DateTimeControlOptions,
   isDateTimeControlOptions,
 } from "../ui-schema"
+import { useNestedAntDFormContext } from "../hooks/useNestedAntDFormContext"
 
 type ControlProps = Omit<JSFControlProps, "uischema"> & {
   uischema: ControlUISchema<unknown> | JSFControlProps["uischema"]
@@ -22,19 +23,6 @@ function getOverrides(options: unknown): DateTimeControlOptions {
   return {}
 }
 
-function getInitialValue(
-  data: unknown,
-  schemaDefault: unknown,
-): string | undefined {
-  if (typeof data === "string" && data !== "") {
-    return data
-  }
-  if (typeof schemaDefault === "string" && schemaDefault !== "") {
-    return schemaDefault
-  }
-  return undefined
-}
-
 export function DateTimeControl({
   handleChange,
   path,
@@ -46,14 +34,13 @@ export function DateTimeControl({
   visible,
   data,
 }: ControlProps) {
-  const setInitialValue = createDateTimeInitialValueSetter(handleChange, path)
-  const form = Form.useFormInstance()
-  useEffect(() => {
-    form.setFieldValue(
-      path,
-      setInitialValue(getInitialValue(data, schema.default)),
-    )
-  }, [data, form, path, schema.default, setInitialValue])
+  const nestedAntdData = useNestedAntDFormContext()
+  const name = nestedAntdData
+    ? nestedAntdData.index !== undefined
+      ? [nestedAntdData.path, nestedAntdData.index]
+      : nestedAntdData.path
+    : path
+
   if (!visible) return null
 
   const rules: Rule[] = [{ required, message: `${label} is required` }]
@@ -64,36 +51,38 @@ export function DateTimeControl({
   const overrides = getOverrides(uischema.options)
 
   return (
-    <Form.Item
-      label={label}
-      id={id}
-      name={path}
-      required={required}
-      validateTrigger={["onBlur"]}
-      rules={rules}
-      {...formItemProps}
-    >
-      <DatePicker
-        format={"YYYY-MM-DDTHH:mm:ssZ"}
-        onChange={(_, dateString) => handleChange(path, dateString)}
-        {...overrides}
-      />
-    </Form.Item>
+    <Col>
+      <Form.Item
+        label={label}
+        id={id}
+        name={name}
+        required={required}
+        validateTrigger={["onBlur"]}
+        rules={rules}
+        initialValue={getInitialValue(data, schema.default)}
+        {...formItemProps}
+      >
+        <DatePicker
+          format={"YYYY-MM-DDTHH:mm:ssZ"}
+          onChange={(_, dateString) => handleChange(path, dateString)}
+          {...overrides}
+        />
+      </Form.Item>
+    </Col>
   )
 }
 
-/**
- * Creates an initial value setter for DateTimeControl that coerces string values to dayjs objects
- */
-function createDateTimeInitialValueSetter(
-  handleChange: (path: string, value: string | undefined) => void,
-  path: string,
-) {
-  return (value: string | undefined) => {
-    const coercedValue = value ? dayjs(value) : value
-    handleChange(path, value)
-    return coercedValue
+function getInitialValue(
+  data: unknown,
+  schemaDefault: unknown,
+): dayjs.Dayjs | undefined {
+  if (typeof data === "string" && data !== "") {
+    return dayjs(data)
+  }
+  if (typeof schemaDefault === "string" && schemaDefault !== "") {
+    return dayjs(schemaDefault)
   }
+  return undefined
 }
 
 export const DateTimeRenderer = withJsonFormsControlProps(memo(DateTimeControl))

src/controls/EnumControl.tsx

@@ -1,9 +1,9 @@
-import { useEffect } from "react"
 import type { ControlProps as JSFControlProps } from "@jsonforms/core"
 import { Form, Select, Segmented, Radio, Col } from "antd"
 import type { Rule } from "antd/es/form"
 import { EnumControlOptions, ControlUISchema } from "../ui-schema"
 import { withJsonFormsControlProps } from "@jsonforms/react"
+import { useNestedAntDFormContext } from "../hooks/useNestedAntDFormContext"
 
 type ControlProps = Omit<JSFControlProps, "uischema"> & {
   uischema: ControlUISchema<unknown> | JSFControlProps["uischema"]
@@ -16,11 +16,7 @@ const isStringOrNumberArray = (arr: unknown[]): boolean => {
 }
 
 export const EnumControl = (props: ControlProps) => {
-  const form = Form.useFormInstance()
-
-  useEffect(() => {
-    form.setFieldValue(props.path, props.data ?? props.schema.default)
-  }, [props.data, form, props.path, props.schema.default])
+  const nestedAntdData = useNestedAntDFormContext()
 
   if (!props.visible) return null
 
@@ -34,6 +30,11 @@ export const EnumControl = (props: ControlProps) => {
   const defaultValue =
     (props.data as unknown) ?? (props.schema.default as unknown)
 
+  const name =
+    nestedAntdData?.index !== undefined
+      ? [nestedAntdData.path, nestedAntdData.index]
+      : (nestedAntdData?.path ?? props.path)
+
   const appliedUiSchemaOptions = props.uischema.options as EnumControlOptions
 
   const enumValue = props.schema.enum
@@ -94,17 +95,19 @@ export const EnumControl = (props: ControlProps) => {
   }
 
   return (
-    <Form.Item
-      label={props.label}
-      id={props.id}
-      name={props.path}
-      required={props.required}
-      initialValue={defaultValue}
-      rules={rules}
-      {...formItemProps}
-    >
-      <Col>{selector}</Col>
-    </Form.Item>
+    <Col>
+      <Form.Item
+        label={props.label}
+        id={props.id}
+        name={name}
+        required={props.required}
+        initialValue={defaultValue}
+        rules={rules}
+        {...formItemProps}
+      >
+        {selector}
+      </Form.Item>
+    </Col>
   )
 }
 

src/controls/ObjectArrayControl.test.tsx

@@ -15,6 +15,8 @@ import {
   arrayControlSortableWithIconsUISchema,
   objectArrayWithNumericFieldControlJsonSchema,
   peopleArrayControlUISchema,
+  objectArrayWithEnumFieldControlJsonSchema,
+  itemsArrayControlUISchema,
 } from "../testSchemas/arraySchema"
 import { UISchema } from "../ui-schema"
 import { JSONFormData } from "../common/schema-derived-types"
@@ -167,6 +169,70 @@ describe("ObjectArrayControl", () => {
     screen.getByDisplayValue("35")
   })
 
+  test("correctly removes from the object list with enum field and remove button", async () => {
+    let data: JSONFormData<typeof objectArrayWithEnumFieldControlJsonSchema> = {
+      items: [],
+    }
+    const user = userEvent.setup()
+    render({
+      schema: objectArrayWithEnumFieldControlJsonSchema,
+      uischema: itemsArrayControlUISchema,
+      data: data,
+      onChange: (result) => {
+        data = result.data as JSONFormData<
+          typeof objectArrayWithEnumFieldControlJsonSchema
+        >
+      },
+    })
+
+    const addButton = await screen.findByRole("button", { name: "Add Items" })
+    await user.click(addButton)
+    await user.click(addButton)
+
+    const statusFields = await screen.findAllByLabelText("Status")
+    expect(statusFields).toHaveLength(3)
+
+    await user.click(statusFields[0])
+    await user.click(screen.getByTitle("foo"))
+
+    await user.click(statusFields[1])
+    await user.click(screen.getAllByTitle("bar")[1])
+
+    await user.click(statusFields[2])
+    await user.click(screen.getAllByTitle("baz")[2])
+
+    await waitFor(() => {
+      expect(data.items).toEqual([
+        { status: "foo" },
+        { status: "bar" },
+        { status: "baz" },
+      ])
+    })
+
+    const removeButtons = await screen.findAllByRole("button", {
+      name: "Delete",
+    })
+    expect(removeButtons).toHaveLength(3)
+
+    // Remove the second item (index 1) which is "bar"
+    await user.click(removeButtons[1])
+
+    await waitFor(() => {
+      expect(data).toEqual({
+        items: [{ status: "foo" }, { status: "baz" }],
+      })
+    })
+
+    expect(
+      screen.getAllByRole("button", {
+        name: "Delete",
+      }),
+    ).toHaveLength(2)
+
+    const remainingStatusFields = screen.getAllByLabelText("Status")
+    expect(remainingStatusFields).toHaveLength(2)
+  })
+
   test("renders with overwritten icons and does not allow overwriting onClick", async () => {
     const user = userEvent.setup()
     let data: JSONFormData<typeof objectArrayControlJsonSchema> = {

src/controls/PrimitiveArrayControl.test.tsx

@@ -9,6 +9,7 @@ import {
   stringArrayControlJsonSchemaWithRequired,
   stringArrayControlJsonSchemaWithTitle,
   numberArrayControlJsonSchema,
+  enumArrayControlJsonSchema,
   arrayInsideCombinatorSchema,
   arrayControlSortableUISchema,
   arrayControlSortableWithIconsUISchema,
@@ -145,6 +146,60 @@ describe("PrimitiveArrayControl", () => {
     screen.getByDisplayValue("3")
   })
 
+  test("correctly removes from the enum list with remove button", async () => {
+    let data: JSONFormData<typeof enumArrayControlJsonSchema> = {
+      assets: [],
+    }
+    const user = userEvent.setup()
+    render({
+      schema: enumArrayControlJsonSchema,
+      uischema: arrayControlUISchema,
+      data: data,
+      onChange: (result) => {
+        data = result.data as JSONFormData<typeof enumArrayControlJsonSchema>
+      },
+    })
+    const addButton = await screen.findByRole("button", { name: "Add Assets" })
+    // Add 3 items
+    await user.click(addButton)
+    await user.click(addButton)
+    await user.click(addButton)
+
+    const comboboxes = await screen.findAllByRole("combobox")
+    expect(comboboxes).toHaveLength(3)
+
+    // Helper to select an option from a combobox
+    const selectOption = async (index: number, title: string) => {
+      await user.click(comboboxes[index])
+      const options = await screen.findAllByTitle(title)
+      await user.click(options[options.length - 1])
+    }
+
+    await selectOption(0, "foo")
+    await selectOption(1, "bar")
+    await selectOption(2, "baz")
+
+    await waitFor(() => {
+      expect(data.assets).toEqual(["foo", "bar", "baz"])
+    })
+
+    const removeButtons = await screen.findAllByRole("button", {
+      name: "Delete",
+    })
+    expect(removeButtons).toHaveLength(3)
+
+    // Remove the second item ("bar")
+    await user.click(removeButtons[1])
+
+    // Verify the correct items remain in the data
+    await waitFor(() => {
+      expect(data.assets).toEqual(["foo", "baz"])
+    })
+
+    const selectedItems = screen.getAllByRole("combobox")
+    expect(selectedItems).toHaveLength(2)
+  })
+
   test("renders with title", async () => {
     const data = { assets: ["apple"] }
     render({

src/controls/combinators/AnyOfControl.test.tsx

@@ -9,6 +9,7 @@ import {
   AnyOfWithDefaultsUISchemaRegistryEntries,
   SplitterUISchemaRegistryEntry,
   splitterAnyOfJsonSchema,
+  anyOfEnumSchema,
 } from "../../testSchemas/anyOfSchema"
 import { UISchema } from "../../ui-schema"
 import { JSONFormData } from "../../common/schema-derived-types"
@@ -106,6 +107,38 @@ describe("AnyOf control", () => {
     column = screen.getByLabelText("Column Name")
     expect(column).toHaveValue("abc")
   })
+  test("AnyOf Control persists state with enums", async () => {
+    render({ schema: anyOfEnumSchema })
+
+    // Start with Option A (default or first option)
+    await screen.findByText("Option A")
+
+    // Select 'active' status
+    const statusSelect = screen.getByRole("combobox")
+    await userEvent.click(statusSelect)
+    await userEvent.click(screen.getByTitle("active"))
+
+    // Switch to Option B
+    await userEvent.click(screen.getByLabelText("Option B"))
+
+    // Verify Option B is active
+    const optionBTab = screen.getByLabelText("Option B")
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(optionBTab.closest("label")).toHaveClass("ant-radio-wrapper-checked")
+
+    // Select 'pending' status
+    const statusSelectB = screen.getByRole("combobox")
+    await userEvent.click(statusSelectB)
+    await userEvent.click(screen.getByTitle("pending"))
+
+    // Switch back to Option A
+    await userEvent.click(screen.getByLabelText("Option A"))
+
+    // Verify Option A is active
+    const optionATab = screen.getByLabelText("Option A")
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(optionATab.closest("label")).toHaveClass("ant-radio-wrapper-checked")
+  })
   test("provides a default value for a required combinator", async () => {
     let data: JSONFormData<typeof AnyOfWithDefaultsSchema> = {}
     const onChange = (result: {