Required form value doesn't work for controlled Select

Forge Forge UI Kit and Custom UI
, ,
1

When my Select component is controlled (using value and onChange) it always says “Project is required” even though there is a value in the Select. Here is a minimal example that produces the bug:

import React, { useState } from "react";
import ForgeReconciler, {
    Select,
    Label,
    Form,
    useForm,
    ErrorMessage,
} from "@forge/react";

const App = () => {
    const { register, formState } = useForm();
    const { errors } = formState;

    const [selectedProject, setSelectedProject] = useState(null);

    return (
        <Form>
            <Label labelFor="project">Project</Label>
            <Select
                id="project"
                {...register("project", {required: "Project is required"})}
                value={selectedProject}
                onChange={setSelectedProject}
                options={[{label: "A", value: "10000"}, {label: "B", value: "10001"}]}
            />
            {errors.project && (
                <ErrorMessage>
                    {errors.project.message}
                </ErrorMessage>
            )}
        </Form>
    );
};

ForgeReconciler.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

image
image415×123 1.19 KB

2

Hi @EliFrigo , you do not need to hold your own form state when using useForm . The register method is adding it’s own value and onChange prop to the components. This example should work for you:

const App = () => {
  const { register, formState, getFieldId, handleSubmit } = useForm();
  const { errors } = formState;

  const [selectedProject, setSelectedProject] = useState(null);

  const onSubmit = (data) => console.log(data);
  const onError = (errors) => console.log(errors);

  return (
    <Form onSubmit={handleSubmit(onSubmit, onError)}>
      <Label labelFor={getFieldId("project")}>Project</Label>
      <Select
        {...register("project", { required: "Project is required" })}
        options={[
          { label: "A", value: "10000" },
          { label: "B", value: "10001" },
        ]}
      />
      {errors?.project ? (
        <ErrorMessage>{errors?.project?.message}</ErrorMessage>
      ) : null}
      <Button type="submit">Submit</Button>
    </Form>
  );
};