react-hook-form

🍄 upgrade to TS4.9 (#9371)
🐞 fix #9383 always updates the errors state for the field array even when the errors subscription missing (#9384)
🌻 close https://github.com/react-hook-form/react-hook-form/issues/9379 flush extra re-render to update the current form state subscription
🥽 improve watch logic (#9397)
🔨 fix conditional useFormState test (#9388)

thanks to @romain-trotard

👉 NEW values props

The following syntax will react to values prop update/changes.

• values will be reactive to update/change and reset accordingly
• provide a reset option to keep dirty/touched values potentially

const values = await fetch('API')

useForm({
  values, // will reset the form when values updates
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

👉 NEW async defaultValues props

The following syntax will support async defaultValues, so we will manage the reset form internally and update formState accordingly.

• promise will only be resolved once during useForm() call
• It's possible to supply resetOptions as well

useForm({
  defaultValues: fetch('API')
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

React use API

useForm({
  defaultValues: use(fetch('API'))
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

🙋 What's the difference between values and defaultValues

values will react to changes and reflect on the form values, and defaultValues is cached for once and will never re-run the promise or react to defaultValues changes.

🌻 close #9379 flush extra re-render at useFormState to update current form state subscription (#9380)
🍄 upgrade to TS4.9 (#9371)

🐞 fix #9366 useWatch with shadow clone Set data (#9369)
🐞 fix #9365 native validation error persists (#9370)

🤦 fix #9355 by revert "🥸 related #9310 regression to include actual ref instead custom object ( #9312)"

⌨️ close #9339 objects of validation rules type (#9341)
🥸 related #9310 regression to include actual ref instead custom object ( #9312)

Revert "🤯 use input reference instead custom object (#9132)" (#9311)

🔮 improve #8601 and remove the relationship between isValid state with mode (#9219)

https://user-images.githubusercontent.com/10513364/199356486-bec6cff7-0c33-4076-a60a-e15dc86ddb8a.mov

🐞 fix #9282 regression on async validation block validation (#9286)
🐞 fix #9251 isValidating state stale with resolver (#9254)
🏍 delete dirty fields node instead of marking as false (#9156)
🤯 use input reference instead custom object (#9132)
🥊 improve native reset API invoke (#9293)
🦘 related #9290 improve setCustomValidity logic (#9292)
👺 fix re-render bug with isValid (#9307)

🕰 support validation for week and time input type (#9189)

<input
  {...register("week", { min: "2022-W40", max: "2022-W50" })}
  type="week"
/>
<input
  {...register("time", { min: "11:00", max: "12:00" })}
  type="time"
/>

https://user-images.githubusercontent.com/10513364/196547407-8ea7363c-44b8-463e-9aaf-f946a2e5af88.mov

🧘🏻 enable focus error with disabled inputs while submitting (#9155)
🧱 prevent runtime error startsWith called with undefined (#9223)
🐞 fix #9216 isValid state not update with async form level trigger (#9218)
🧦 fix accessibility issue on examples with input missing id (#9174)
🚔 check field array value type before updating (#9170)
📓 update TSDoc for useFieldArray (#9178)

thanks to @BogdanCerovac and @leapful

🍨 feature: include defaultValues inside formState (#8966)

const { formState, watch } = useForm({
  defaultValues: { name: 'test' }
})
const { defaultValues } = useFormState()

const name = watch('name')

return (
  <div>
    <p>Your name was {defaultValues.name}</p>
    <p>Updated name is {name}</p>
  </div>
)

https://user-images.githubusercontent.com/10513364/194426053-454e8e5b-f1c1-4a9d-8428-ac33296c813f.mov

🖨 close #9058 avoid clone object when contains prototype methods

class DataModel {
  constructor() {
    this.firstName = null
  }
}
const formData = new DataModel({ firstName: "Bob" })

useForm({
  defaultValues: formData // no longer get clone internally
})

🐞 fix #9134 useFieldArray validation action inconsistency (#9136)
🥷 close #9126 useController ref overwrite under strict mode (#9130)
😵‍💫 close #9105 improve input focus method check (#9109)
📖 fix UseFieldArrayAppend types example (#9093)
🖇 change link (#9159)
🙌 improve naming of options forEach local (#9152)

thanks to @arieloO @Ilaygoldman and @simenbrekken-visma

🍨 feature: include defaultValues inside formState (#8966)

const { formState, watch } = useForm({
  defaultValues: { name: 'test' }
})
const { defaultValues } = useFormState()

const name = watch('name')

return (
  <div>
    <p>Your name was {defaultValues.name}</p>
    <p>Updated name is {name}</p>
  </div>
)

😵‍💫 close #9105 improve input focus method check (#9109)
🖨 close #9058 avoid clone object when contains prototype methods

class DataModel {
  constructor() {
    this.firstName = null
  }
}
const formData = new DataModel({ firstName: "Bob" })

useForm({
  defaultValues: formData // no longer get clone internally
})

📖 fix UseFieldArrayAppend types example (#9093)

thanks to @arieloO

🪲 fix #9082 inconsistency between single/group of checkboxes disabled check state (#9083)
🌡️ improve setFocus to prevent throw error (#9081)

🚂 feature: reset to support callback syntax (#9051)

reset with partial form values will require invoking getValues at the same time, here is an improvement 👇

Convert your code from:

reset({
  ...getValues(),
  partialData: 'onlyChangeThis'
})

to:

reset((formValues) => {
  return {
    ...formValues,
    partialData: 'onlyChangeThis'
  }
})

🎉 feature: new type FieldPathByValue field path by value generic implementation

function CustomFormComponent<
  TFieldValues extends FieldValues,
  Path extends FieldPathByValue<TFieldValues, Date>
>({ control, name }: { control: Control<FieldValues>; name: Path }) {
  const { field } = useController({
    control,
    name,
  });
}

function App() {
  const { control } = useForm<{
    foo: Date;
    baz: string;
  }>();

  return (
    <form>
      <CustomFormComponent control={control} name="foo" /> {/* no error */}
      <CustomFormComponent control={control} name="baz" /> {/*  throw an error since baz is string */}
    </form>
  );
}

🛵 close #8969 improve type for useFieldArray rules validate prop #8974

🛗 upgrade to TS 4.8.0 and Jest 29 #8620
🐞 fix #8970 register field array cause render issue #8972
🐞 fix: typings for useWatch() with no arguments #8923
🐞 fix #8919 make useController fieldState properties enumerable

const { fieldState } = useController({ name: 'test' })
const copy = {...fieldState} ✅

👶🏻 close #8909 form context children prop type (https://github.com/react-hook-form/react-hook-form/pull/8910)

<FormProvider {...methods}>
  <div /> // ✅
  <div /> // ✅
</FormProvider>

🐌 allow field errors to escape type check when provided with any type
🔐 github workflows security hardening #8965
💚 ci: stop csb ci from publishing a comment on PR (https://github.com/react-hook-form/react-hook-form/pull/8977)

thanks to @Moshyfawn, @sashashura, @carvalheiro, @chetvishal and @MicaelRodrigues

🎉 feature: new type FieldPathByValue field path by value generic implementation

function SomeCustomFormComponent<
  TFieldValues extends FieldValues,
  Path extends FieldPathByValue<TFieldValues, Date>
>({ control, name }: { control: Control<FieldValues>; name: Path }) {
  const { field } = useController({
    control,
    name,
  });
  return null;
}

function ExampleOfUsage() {
  const { control } = useForm<{
    foo: Date;
    baz: string;
  }>();

  return (
    <div>
      <SomeCustomFormComponent control={control} name="foo" />{" "}
      {/* throw no error */}
      <SomeCustomFormComponent control={control} name="baz" />{" "}
      {/*  throw an error since baz is string */}
    </div>
  );
}

🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8919 make useController fieldState properties enumerable

const { fieldState } = useController({ name: 'test' })
const copy = {...fieldState} ✅

👶🏻 close https://github.com/react-hook-form/react-hook-form/issues/8909 form context children prop type (https://github.com/react-hook-form/react-hook-form/pull/8910)

<FormProvider {...methods}>
  <div /> // ✅
  <div /> // ✅
</FormProvider>

🐌 allow field errors to escape type check when provided with any type

thanks to @carvalheiro, @chetvishal and @MicaelRodrigues

Revert "🧳 let isSubmitting state update after valid form (https://github.com/react-hook-form/react-hook-form/pull/8829)"

🐞 fix(path): keys of Date | FileList | File shouldn't be add to the PathImpl https://github.com/react-hook-form/react-hook-form/pull/8804
🐞 fix Date, FileList, File and Blob FieldErrors mapping #8772
🚌 update isSubmitting state after valid form #8829

function App() {
  const { formState: { isSubmitting }, register } = useForm()

  console.log(isSubmitting) // isSubmitting will remain false if form is invalid during submission

  return <form onSubmit={handleSubmit(async () => await sleep(1000))}>
    <input {...register('test', { required: true })} />
  </form>
}

🧃 upgrade to cypress 10 #8769
📖 fix nested fields example #8840
📖 add nested form example #8703
📖 improve doc of single watch #8773
📖 fixing typo (Contruído to Construído) on pt-BR translation #8762

thanks to @HarmonyEarth, @yleflour, @glekner, @vemoo, @ronny1020 and @joaoeffting

🎉 feature request: #6879 useFieldArray support rules props (#8102)

useFieldArray({
  name: 'test',
  rules: {
    required: true,
    minLength: 2,
    maxLength: 10,
    validate: (fieldArrayValues) => {
      if (fieldArrayValues[2].title === 'test') {
        return 'validate Error'
      }
    }
  }
})

errors?.test?.root?.message // access root level errors

Note: Related context and poll for error message naming: https://github.com/react-hook-form/react-hook-form/discussions/8625

🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8584: handle nullable nested properties (https://github.com/react-hook-form/react-hook-form/pull/8699)
🆎 close https://github.com/react-hook-form/react-hook-form/issues/8689 fix type inconsistency with control (https://github.com/react-hook-form/react-hook-form/pull/8691)
🐞 fix native form reset isn't executed if first fieldReference isn't a HTMLElement (https://github.com/react-hook-form/react-hook-form/pull/8678)
🐞 fix useFieldArray action type incorrectness (https://github.com/react-hook-form/react-hook-form/pull/8660)
🚔 close https://github.com/react-hook-form/react-hook-form/issues/8653 when useFormContext provide no generic for type check (https://github.com/react-hook-form/react-hook-form/pull/8654)
🛰 useFormContext include type tests (https://github.com/react-hook-form/react-hook-form/pull/8656)
🤣 fix typo in useForm.ts (https://github.com/react-hook-form/react-hook-form/pull/8645)
📚 README Helper / Sponsor Generation Script / Workflow (https://github.com/react-hook-form/react-hook-form/pull/8676)

thanks to @@ANTARES-KOR @zandowc @@alexviar @ElectronicsArchiver and @kyoto7250

🎪 feature request: #6879 useFieldArray support rules props (#8102)

useFieldArray({
  name: 'test',
  rules: {
    required: true,
    minLength: 2,
    maxLength: 10,
    validate: (fieldArrayValues) => {
      if (fieldArrayValues[2].title === 'test') {
        return 'validate Error'
      }
    }
  }
})

errors?.test?.root?.message // access root level errors

Note: Related context and poll for error message naming: https://github.com/react-hook-form/react-hook-form/discussions/8625

🐏 fix https://github.com/react-hook-form/react-hook-form/issues/8584: field errors type with optional fields (https://github.com/react-hook-form/react-hook-form/pull/8591)
🧳 close https://github.com/react-hook-form/react-hook-form/issues/8600 update code example for NestedValue input
🖼 Integrate jest-preview into react-hook-form (https://github.com/react-hook-form/react-hook-form/pull/8577)
🤓 improve the readability of Merge type (https://github.com/react-hook-form/react-hook-form/pull/8570)
🚝 test: migration from ts-jest to @swc/jest (https://github.com/react-hook-form/react-hook-form/pull/8572)
🏹 refactor: use const instead of props (https://github.com/react-hook-form/react-hook-form/pull/8571)
🔍 feat: Add ability to search test file on watch mode (https://github.com/react-hook-form/react-hook-form/pull/8573)
🧘🏻 ensure the field is focused when selected (https://github.com/react-hook-form/react-hook-form/pull/8566)

thanks to @nvh95, @elstgav and @kotarella1110

⚛️ upgrade to react 18 (https://github.com/react-hook-form/react-hook-form/pull/8529)
🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8558 missing select function for controlled component (https://github.com/react-hook-form/react-hook-form/pull/8559)
🔬 improve nested field errors type (https://github.com/react-hook-form/react-hook-form/pull/8527)
🗑 UseFormHandleSubmit remove unused generic (https://github.com/react-hook-form/react-hook-form/pull/8526)

👋 deprecate on NestedValue and UnpackNestedValue (https://github.com/react-hook-form/react-hook-form/pull/8528)

type FormValues = {
-  select: NestedValue<{
-    nested: string
-  }>
+  select: {
+    nested: string
+  }
}

errors.select.message ✅ 

Important (25/06/2022)

The deprecation with UnpackNestedValue caused a breaking change on the @hookform/resolvers package, please refer to the changelog and upgrade the resolver to the latest.

🥼 close https://github.com/react-hook-form/react-hook-form/issues/8564 update changelog for breaking change with resolver
💥 The above type deprecation cause breaking change with @hookform/resolvers needs to be upgraded to version ^2.9.3 above

Huge thanks go to @felixschorer on type improvement and @romain-trotard for improving tests for react 18