Getting wrong "is a required field" for lists

[MoSattler]

Describe the bug and the expected behavior

In certain situations, when using lists, default values and useInputControl, I get falsely flagged "is required field" errors.

Conform version

1.1.0

Steps to Reproduce the Bug or Issue

import { submit } from './actions'
import { useFormState } from 'react-dom'
import { parseWithYup } from '@conform-to/yup'
import {
  useForm,
  getFormProps,
  useInputControl,
  FieldMetadata
} from '@conform-to/react'
import { object, string, tuple } from 'yup'

export const formSchema = object({
  myTupleOfStrings: tuple([
    string().required(), 
    string().required()
  ]).required()
})

const CustomComponenWrapper = ({ field }: { field: FieldMetadata<string> }) => {
  const originalFileNameFieldControl = useInputControl(field)

  return (
    <CustomComponent
      value={originalFileNameFieldControl.value}
      onChange={(value) => originalFileNameFieldControl.change(value)}
    />
  )
}

function NewModuleRunPage() {
  const [lastResult, action] = useFormState(submit, undefined)
  const [form, fields] = useForm({
    lastResult,
    defaultValue: {
      myTupleOfStrings: [null, null]
    },
    onValidate({ formData }) {
      return parseWithYup(formData, { schema: formSchema })
    }
  })

  return (
    <form action={action} {...getFormProps(form)}>
      {fields.myTupleOfStrings.getFieldList().map((field) => (
        <CustomComponenWrapper key={field.id} field={field} />
      ))}
      <button type="submit">Submit</button>
    </form>
  )
}

Additional context

In the example, if I submit right away, without changing any values, I get:

myTupleOfStrings is a required field

even though myTupleOfStrings is defined in the default values.

I'd expect a message

myTupleOfStrings["0"] is a required field

and I indeed get that if only one of the two values is set to null.

[edmundhung]

@MoSattler Can you prepare a repo so I can debug it further? I guess this is a bug related to how useInputControl works

[MoSattler]

@edmundhung Will a code sandbox sufice?

[edmundhung]

Thanks for the repo. The issue is indeed related to useInputControl in which it doesn't render an hidden input for you by default and so Conform treats it as an empty array instead of an array of two items with empty value. If you render an hidden input inside the <CustomComponenWrapper />, the useInputControl hook will pick it up and validate just fine.

Unfortunately I don't think I would be able to fix the issue in useInputControl directly because of the complexity on managing an hidden input for all kind of usecase. I would recommend giving the experimetnal useControl hook introduced in v1.0.2 a try.