FormSelect: Compatibility with react-hook-form

[lavocatt]

Hello 👋

I'm trying to make PF5 work with the react-hook-form library

Considering this minimalist code example:

type Inputs = {
  PF5Select: string;
  JSSelect: string;
};

const ImageOutput = () => {
  const { register, watch } = useForm<Inputs>({});
  const pf5Select = watch("PF5Select");
  const jsSelect = watch("JSSelect");
  console.log("DEMO release", pf5Select);
  console.log("DEMO category", jsSelect);

  const { onChange, onBlur, name, ref } = register("PF5Select");

  return (
    <Form>
      <FormGroup>
        <FormSelect
          ouiaId="release_select"
          onChange={onChange}
          onBlur={onBlur}
          name={name}
          ref={ref}
        >
          <FormSelectOption value="A" label="Category A" />
          <FormSelectOption value="B" label="Category B" />
        </FormSelect>
        <select {...register("JSSelect")}>
          <option value="A">Category A</option>
          <option value="B">Category B</option>
        </select>
      </FormGroup>
    </Form>
  );
};

I would expect the two select to have the same behavior which is to keep the selection the user made and to populate the state accordingly. However the behavior is different, the PF5 select isn't working as I would expect it to.

You can test this out on the code sandbox there https://codesandbox.io/s/cold-sea-cs7wqr

I think it's due to the fact that there's no forwarding for the ref to the inner select of the FormSelect. And if I'm not mistaken there was a similar issue with TextInput in the past #2913.

Will it be possible to have a support for ref for the FormSelect please?

Alternatively, if that's not possible, what are you recommending for form state validation and state management ?

Thanks for your help.

Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement?

We're from the Image Builder team and we want to refactor our image creation wizard by the end of q4 2023.

[lavocatt]

I've found a way to make it work:

const ImageOutput = () => {
  const { register, setValue, watch } = useForm<Inputs>({});
  const pf5Select = watch("category");
  console.log("DEMO release", pf5Select);

  const { name } = register("category");

  return (
    <Form>
      <FormGroup>
        <FormSelect
          ouiaId="release_select"
          value={pf5Select}
          onChange={(value) =>
            setValue("category", value.currentTarget.value, {
              shouldValidate: true
            })
          }
          name={name}
        >
          <FormSelectOption value="A" label="Category A" />
          <FormSelectOption value="B" label="Category B" />
        </FormSelect>
      </FormGroup>
    </Form>
  );
};

https://codesandbox.io/s/strange-tess-sl62gp

Would still be neat to have it work with the ref though.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.