react-hook-form changelog and release notes, page 3 | npm

NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →

7.43.030 Jan 2023

🌏 feature: support global error type #9746

🌏 feature: support global error type #9746

const onSubmit = async () => {
  const response = await fetch(...)
  if (response.statusCode > 200) {
      setError('root.serverError', { 
        type: response.statusCode,
      })
  }
}

const onClick = () => {
  setError('root.random', { 
    type: 'random', 
  })
}

return (
  <>
    {errors.root.serverError.type === 400 && <p>server response message</p>}
    <p>{errors.root?.serverError?.message}</p>
    <p>{errors.root?.random?.message}</p>
  </>
)

🪜 fix set values for controlled components (#9780)

const { control } = useForm({ values: { test: '' } })
<Controller name="test" /> // no longer throw react warning for uncontrolled become controlled.

🚓 stronger typing to document non-spec attribute uses (#9809)

register('number', {
  valueAsNumber: true,
  pattern: /[1-4]/g // ❌ type error
})

🏋🏻‍♀️ reduce package size (#9778) 🧧 reduce unknown and any (#9816)

thanks to @rekliner

Open source →

Additional notes

Added

support global error type

const onSubmit = async () => {
  setError('root.serverError', {
    type: response.statusCode,
  });
};
const onClick = () => {
  setError('root.random', {
    type: 'random',
  });
};

return (
  <>
    {errors.root.serverError.type === 400 && <p>server response message</p>}
    <p>{errors.root?.random?.message}</p>
  </>
);

Open source →

7.43.0-next.018 Jan 2023pre-release

🌏 feature: support global error type #9746 ```tsx const onSubmit = () => { const response = await fetch(...) if (response.statusCode > 200) { setError

🌏 feature: support global error type #9746

const onSubmit = () => {
  const response = await fetch(...)
  if (response.statusCode > 200) {
      setError('root.serverError', { 
        type: response.statusCode,
        message: e.message,
      })
  }
}

const onClick = () => {
  setError('root.random', { 
    type: 'random', 
    message: 'random' 
  })
}

return (
  <>
    {errors.root.serverError.type === 400 && <p>server response message</p>}
    <p>{errors.root.serverError.message}</p>
    
    <p>{errors.root.random.message}</p>
  </>
)

🪜 fix set defaultValues for controlled components with values props (#9780)

Open source →

7.42.013 Jan 2023Deprecated

…error 🙆🏻‍♂️ fix: revert fieldState.invalid deprecated (#9760) 🇪🇸 fix Spanish translation

📽 feature: validate function to include form values (#9079)

type FormValues = {
  number1: number;
  number2: number;
};

// Making exported validate function isolated for validation
export function validateNumber(_: number, formValues: FormValues) {
  return formValues.number1 + formValues.number2 === 3;
}

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      number1: 0,
      number2: 0
    }
  });

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input
        type="number"
        {...register("number1", {
          validate: validateNumber,
          valueAsNumber: true
        })}
      />
      <input
        type="number"
        {...register("number2", {
          validate: validateNumber,
          valueAsNumber: true
        })}
      />
     <button>submit</button>
    </form>
  );
}

🛤️ keep track of traversed types to avoid self-referencing while constructing paths for a type (#9540) 🏋🏻‍♀️ reduced code with unset by weight reduction of 1% (#9575) 📔 fix warning for setValue test case 🪜 Improve handleSubmit function by removing swallow runtime error 🙆🏻‍♂️ fix: revert fieldState.invalid deprecated (#9760) 🇪🇸 fix Spanish translation (#9737)

thanks to @SimplyLinn & @Mini-ghost @mango906 @amendezm

Open source →

Additional notes

Added

build in validation validate support second argument for form values

// Making exported validate function isolated for validation
export function validateNumber(_: number, formValus: FormValues) {
  return formValus.number1 + formValus.number2 === 3;
}

<input
  type="number"
  {...register('number1', {
    validate: validateNumber,
    valueAsNumber: true,
  })}
/>;

Changed

handleSubmit no longer catch onSubmit callback error
Remove deprecated for fieldState.invalid

Open source →

7.42.0-next.01 Jan 2023pre-release

📽 feature: validate function to include formValues

📽 feature: validate function to include formValues (#9079)

type FormValues = {
  number1: number;
  number2: number;
};

// Making exported validate function isolated for validation
export function validateNumber(_: number, formValus: FormValues) {
  return formValus.number1 + formValus.number2 === 3;
}

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      number1: 0,
      number2: 0
    }
  });

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input
        type="number"
        {...register("number1", {
          validate: validateNumber,
          valueAsNumber: true
        })}
      />
      <input
        type="number"
        {...register("number2", {
          validate: validateNumber,
          valueAsNumber: true
        })}
      />
     <button>submit</button>
    </form>
  );
}

🛤️ keep track of traversed types to avoid self-referencing while constructing paths for a type (#9540) 🏋🏻‍♀️ reduced code with unset by weight reduce of 1% (#9575) 📔 fix warning for setValue test case 🪜 Improve handleSubmit function

thanks to @SimplyLinn & @Mini-ghost

Open source →

7.41.016 Dec 2022Deprecated

…of inputs (#9555) 📔 fix Controller example using deprecated as prop (#9535) 🐞 fix #9521 isValidting property stuck (#9523) 🔨 feat: Migrate to pnpm (#9…

👉 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

const { formState: { isLoading } } = useForm({
  defaultValues: fetch('API')
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

React use API

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

https://user-images.githubusercontent.com/10513364/208200735-6248b069-9b7d-4bd1-9742-55d1ef8d238a.mov

🙋 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 #9525 add isLoading state for async defaultValues (#9526) 🐞 fix #9581 incorrect type for array of string for message (#9584) 🐞 fix #9571 validation issue with unregister input with valueAsNumber (#9572) 🐞 fix(useWatch): default value for array of inputs (#9555) 📔 fix Controller example using deprecated as prop (#9535) 🐞 fix #9521 isValidting property stuck (#9523) 🔨 feat: Migrate to pnpm (#9516) 🎹 fix #9509 incorrect type for WatchObserver (#9510) 🌳 include flush root render method to createFormControl (#9479)

Huge thanks goes to @nvh95's work on PNPM and also thanks to @bell-steven's contribution

Open source →

Additional notes

Added

useForm added values props

const values = await fetch('API');

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

new isLoading formState for async defaultValues

const {
  formState: { isLoading },
} = useForm();

Changed

useForm support async defaultValues props

const {
  formState: { isLoading },
} = useForm({
  defaultValues: fetch('API'),
  // resetOptions: {
  //   keepDirtyValues: true
  // }
});

Open source →

7.40.0-next.123 Nov 2022pre-release

👍 Improved async defaultValues inference

👍 Improved async defaultValues inference

const fetchData = async () => {
  await sleep(1000)
  return {
    data: 'test'
  }
}

- useForm<Awaited<ReturnTypeof<typeof fetchData>>>({
+ useForm({
  defaultValues: fetchData, // will infer the promise return type
})

👍 Improved useForm resetOptions to keep track of dirty input

- const { formState: { dirtyFields } } = useForm({
+ useForm({ // dirtyFields subscription is no longer required
  values,
  resetOptions: {
    keepDirtyValues; true, // only non dirty input will receive data from the values update
  }
})

🪶 improve useFormContext perf by avoiding reference re-create with omit 🦏 close #9410 improve UX when subscribing to both isValid and errors state (#9413)

Open source →

7.40.0-next.017 Nov 2022pre-release

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

👉 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)

Open source →

7.38.018 Oct 2022

🕰 support validation for week and time input type

🕰 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

Open source →

Additional notes

Added

support build-in validation with input type week and time

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

Open source →

7.37.06 Oct 2022

🍨 feature: include defaultValues inside formState

🍨 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

Open source →

Additional notes

Added

new formState defaultValues

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>
);

Changed

defaultValues: complex object data contains prototype methods will not be cloned internally

Open source →

7.37.0-next.029 Sept 2022pre-release

🍨 feature: include defaultValues inside formState

🍨 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

Open source →

7.36.020 Sept 2022

🚂 feature: reset to support callback syntax

🚂 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'
  }
})

Open source →

Additional notes

Added

reset to support callback syntax

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

Open source →

7.35.09 Sept 2022

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

🎉 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

Open source →

Additional notes

Added

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>
  );
}

Changed

form context support children prop type

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

Open source →

7.35.0-next.025 Aug 2022pre-release

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

🎉 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

Open source →

7.34.112 Aug 2022

🐞 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,

🐞 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

Open source →

7.34.028 Jul 2022

🎉 feature request: #6879 useFieldArray support rules props

🎉 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

Open source →

Additional notes

Added

Build in validation support for useFieldArray with rules prop

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

Open source →

7.34.0-next.010 Jul 2022pre-release

🎪 feature request: #6879 useFieldArray support rules props

🎪 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

Open source →

7.33.024 Jun 2022Breaking

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

⚛️ 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

Open source →

7.31.010 May 2022

🚀 reset optional prop: keepDirtyValues

🚀 reset optional prop: keepDirtyValues (https://github.com/react-hook-form/react-hook-form/pull/8237)

reset(
  {
    firstName: "bill", // if firstName is dirty then the value will be retained
    lastName: "luo"
  },
  { keepDirtyValues: true } // keep any changed field
);

👩‍🔧 close https://github.com/react-hook-form/react-hook-form/issues/8324 auto-correct field array errors on user action (https://github.com/react-hook-form/react-hook-form/pull/8325)

const { append } = useFieldArray()

append({ data: '' }) // will auto correct existing field array errors if any

🐞 fix: clone objects which have functions (https://github.com/react-hook-form/react-hook-form/pull/8301) 📖 fix name of a new option in 6.12.0 change-log notes (https://github.com/react-hook-form/react-hook-form/pull/8335)

thanks to @Moshyfawn @airman5573 @TkDodo and @MasterOdin

Open source →

Additional notes

Added

new: reset optional prop: keepDirtyValues

reset(
  {
    firstName: 'bill', // if firstName is dirty then the value will be retained
    lastName: 'luo',
  },
  { keepDirtyValues: true }, // keep any changed field
);

Changed

useFieldArray auto-correct field array errors on user action

const { append } = useFieldArray();

append({ data: '' }); // will auto correct existing field array errors if any

Open source →

7.30.017 Apr 2022

🐣 determine checkbox group by defaultValues set as array value

Notes

🐣 determine checkbox group by defaultValues set as array value (https://github.com/react-hook-form/react-hook-form/pull/7938)

useForm({
  defaultValues: {
    checkboxes: [], // register checkbox will be determine as array of checkboxes
  },
});
register('checkboxes'); // will return array as value

🧪 improve test cases with checkbox default value as array (https://github.com/react-hook-form/react-hook-form/pull/7501) 📕 add fieldState invalid depreciation note (https://github.com/react-hook-form/react-hook-form/pull/8202) ⛑ improve getNodeParentName missing case(s) (https://github.com/react-hook-form/react-hook-form/pull/8181) 🔨 support field array parents with numbers in name (https://github.com/react-hook-form/react-hook-form/pull/8167) 💉 improve lib tests cases (https://github.com/react-hook-form/react-hook-form/pull/8155)

Contributors

Thanks to contributors below ❤️

@spacenate
@tedliang
@Moshyfawn
@jgullstr
@romain-trotard

Open source →

Additional notes

Changed

improve checkboxes value determine by defaultValues

useForm({
  defaultValues: {
    checkboxes: [], // register checkbox will be determine as array of checkboxes
  },
});
register('checkboxes'); // will return array as value

Open source →

7.28.013 Mar 2022

🏬 enable deps with string syntax (https://github.com/react-hook-form/react-hook-form/pull/7901) `tsx register('test', { deps: 'theOtherInput' }) regis

🏬 enable deps with string syntax (https://github.com/react-hook-form/react-hook-form/pull/7901)

register('test', { deps: 'theOtherInput' })
register('test', { deps: ['theOtherInput', 'others'] })

🧷 fix field array update to avoid external mutation 🐞 fix https://github.com/react-hook-form/react-hook-form/issues/7960 issue on unset deeply nested array field (https://github.com/react-hook-form/react-hook-form/pull/7961) 🐞 fix https://github.com/react-hook-form/react-hook-form/issues/7958 issue with checkbox plus portal (https://github.com/react-hook-form/react-hook-form/pull/7959) 📦 unpack blob data type (https://github.com/react-hook-form/react-hook-form/pull/7937)

thanks to @DASPRiD and @Moshyfawn

Open source →

Additional notes

Changed

register API options deps now support string

register('test', { deps: 'test' });

Open source →

7.28.0-next.026 Feb 2022pre-release

🏬 enable deps with string syntax (https://github.com/react-hook-form/react-hook-form/pull/7901) `tsx register('test', { deps: 'theOtherInput' }) 🧷 fix

🏬 enable deps with string syntax (https://github.com/react-hook-form/react-hook-form/pull/7901)

register('test', { deps: 'theOtherInput' })

🧷 fix field array update to avoid external mutation

Open source →

7.27.011 Feb 2022

✨ https://github.com/react-hook-form/react-hook-form/issues/7138 feature: allow selecting input's content on focus

✨ https://github.com/react-hook-form/react-hook-form/issues/7138 feature: allow selecting input's content on focus (https://github.com/react-hook-form/react-hook-form/pull/7781)

setFocus('fieldName', { shouldSelect: true })

https://user-images.githubusercontent.com/10513364/153570934-ca29337f-d7ce-4744-b282-6939c2e17b48.mp4

⌨️ fix https://github.com/react-hook-form/react-hook-form/issues/7772 type issue by using UnpackNestedValue on FieldArray methods (https://github.com/react-hook-form/react-hook-form/pull/7773)

thanks to @Moshyfawn and @hpersson

Open source →

Additional notes

Added

new option for setFocus to select the entire field value

setFocus('fieldName', { shouldSelect: true });

Open source →