Using Move action on fieldArray Radio input

[douglasrcjames]

I am trying to move values from one position to another with the built in function with fieldArrays but the radio field seems to not switch properly. Using my codesandbox below, when I create just two array entries, labeling the first with all "1" type values and the second with "2" values, then attempt to click the "move" button, the other fields swap as expected, but the radio field will only swap the second value and the first value is not seen, as is "null" it seems. What am I missing here?

https://codesandbox.io/p/sandbox/react-hook-form-usefieldarray-forked-vmddlh?file=%2Fsrc%2Findex.tsx

[sujinleeme]

Currently, the radio input is not controlled.

What the document recommends in the useFieldArray():

Each input name needs to be unique, if you need to build checkbox or radio with the same name then use it with useController or Controller.

Eventually, you may need to create the controlled radio / radio group component with useController or Controller.

e.g) codesandbox

const RadioButtonGroup = ({
  control,
  index: number,
}: {
  control: UseForm["control"];
  index: number;
}) => {
  const { field } = useController({
    control,
    name: `test.${number}.radioEx`,
    rules: {
      required: true,
    },
  });
  const { value, name, ...methods } = field;

  return (
    <div>
      <p style={{ display: "inline", margin: "0" }}>r-op 1</p>
      <input
        type="radio"
        {...methods}
        value="r-op 1"
        checked={value === "r-op 1"}
      />
      <p style={{ display: "inline", margin: "0" }}>r-op 2</p>
      <input
        type="radio"
        {...methods}
        value="r-op 2"
        checked={value === "r-op 2"}
      />
    </div>
  );
};

[douglasrcjames]

Gotcha, okay that makes sense. Do you know if any other input types are not controlled? Or is just the radio input type?

[sujinleeme]

Inside the plain form object, it works well. RHF checks the input type and gets value by ref

react-hook-form/src/logic/getFieldValue.ts

Line 12 in ec8a46e

export default function getFieldValue(_f: Field['_f']) {

I'm not sure about the core development part, but it seems like the only thing that isn't working in the array is <input type=radio {...register('name')} because same names are registered in different refs.

[Moshyfawn]

From the useFieldArray docs:

Each input name needs to be unique, if you need to build checkbox or radio with the same name then use it with useController or Controller.

[douglasrcjames]

Thanks y'all, this has helped me understand this usage a bit more!