Fix: Support type='select' for multiple select defaulting to [] (#1061)

- Previously only component='select' was checked for multiple select handling
- Now also checks type='select' to match user expectations
- Fixes react-final-form-arrays#185 where users pass type='select' multiple
- Added 3 regression tests to verify fix
- All tests pass (139/139, 99.32% coverage)

Co-authored-by: Erik Rasmussen <erik@mini.local>

Author: erikras-richard-agent

src/useField.test.js

@@ -598,4 +598,81 @@ describe("useField", () => {
     expect(renderSpy.mock.calls[0][0]).toBe("Apple");
     expect(getByTestId("array").value).toBe("Apple");
   });
+
+  it("should default undefined value to [] for select multiple with type prop (fix react-final-form-arrays #185)", () => {
+    const renderSpy = jest.fn();
+    const MySelectField = () => {
+      const { input } = useField("scopes", { type: "select", multiple: true });
+      renderSpy(input.value);
+      return (
+        <select {...input} multiple data-testid="select">
+          <option value="read">Read</option>
+          <option value="write">Write</option>
+        </select>
+      );
+    };
+    render(
+      <Form onSubmit={onSubmitMock}>
+        {() => (
+          <form>
+            <MySelectField />
+          </form>
+        )}
+      </Form>,
+    );
+    // When no initial value is provided, should default to [] not undefined
+    // This prevents React warning: "The `value` prop supplied to <select> must be an array if `multiple` is true"
+    expect(renderSpy.mock.calls[0][0]).toEqual([]);
+  });
+
+  it("should default undefined value to [] for select multiple with component prop", () => {
+    const renderSpy = jest.fn();
+    const MySelectField = () => {
+      const { input } = useField("scopes", { component: "select", multiple: true });
+      renderSpy(input.value);
+      return (
+        <select {...input} multiple data-testid="select">
+          <option value="read">Read</option>
+          <option value="write">Write</option>
+        </select>
+      );
+    };
+    render(
+      <Form onSubmit={onSubmitMock}>
+        {() => (
+          <form>
+            <MySelectField />
+          </form>
+        )}
+      </Form>,
+    );
+    // When no initial value is provided, should default to [] not undefined
+    // This prevents React warning: "The `value` prop supplied to <select> must be an array if `multiple` is true"
+    expect(renderSpy.mock.calls[0][0]).toEqual([]);
+  });
+
+  it("should ensure select multiple value is always an array", () => {
+    const renderSpy = jest.fn();
+    const MySelectField = () => {
+      const { input } = useField("scopes", { type: "select", multiple: true });
+      renderSpy(input.value);
+      return (
+        <select {...input} multiple data-testid="select">
+          <option value="read">Read</option>
+          <option value="write">Write</option>
+        </select>
+      );
+    };
+    render(
+      <Form onSubmit={onSubmitMock} initialValues={{ scopes: null }}>
+        {() => (
+          <form>
+            <MySelectField />
+          </form>
+        )}
+      </Form>,
+    );
+    // Even if the form value is null/undefined, input.value should be []
+    expect(Array.isArray(renderSpy.mock.calls[0][0])).toBe(true);
+  });
 });

src/useField.ts

@@ -122,7 +122,7 @@ function useField<
     // Use Form initialValues if available, otherwise use field initialValue
     let initialStateValue = formInitialValue !== undefined ? formInitialValue : initialValue;
 
-    if (component === "select" && multiple && initialStateValue === undefined) {
+    if ((component === "select" || type === "select") && multiple && initialStateValue === undefined) {
       initialStateValue = [];
     }
 
@@ -191,7 +191,7 @@ function useField<
       }
     }
 
-    if (component === "select" && multiple) {
+    if ((component === "select" || type === "select") && multiple) {
       return Array.isArray(value) ? value : [];
     }
     // For checkboxes and radios, the `value` prop on the input element itself