DEV Community

Using React Hook Form v6+ with Ionic React Components - Update

Aaron K Saunders on July 17, 2020

🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆 This is a quick post showing quickly how to make latest version of Re...

Read full post

Aaron K Saunders • Jul 24 '20 • Edited

Saw this issue on Stackoverflow, stackoverflow.com/questions/630772...

here is a workaround

You can just add the interface...

export interface CheckboxChangeEventDetail {
  value: any;
  checked: boolean;
}

and then set the code

<IonItem>
  <Controller
    render={({ onChange, onBlur }) => (
      <IonCheckbox
        onIonChange={(e: CustomEvent<CheckboxChangeEventDetail>) => {
          onChange(e?.detail.checked);
          console.log(e);
        }}
        onIonBlur={onBlur}
      />
    )}
    control={control}
    defaultValue={false}
    name="saveInfo"
    rules={{
      required: false,
    }}
  />
</IonItem>

curious-webs • Aug 15 '21

Tried using interface for email field But still getting "Property 'onChange' does not exist on type"
in here
render={({ onChange, onBlur, value }) => (

Wendy • Jul 22 '20

Thank you for updating this. How would you go about testing this component? I have a simple Ionic Text Input component wrapped in a Controller just like the example above.

<Controller
      control={control}
      name="emailInput"
      rules={{ required: true }}
      render={({ value, onChange, onBlur }) => (
        <IonInput
          type="text"
          value={value}
          data-testid="input-email"
          onIonChange={onChange}
          onBlur={onBlur}
        />
      )}
    />

I've tried to use the example from this article:

import { ionFireEvent as fireIonEvent } from "@ionic/react-test-utils";
const emailInput = await findByTestId("input-email");
fireIonEvent.ionChange(emailInput, "test@email.com");

I've also tried this (since ion input components have a detail property that specifies the value of the input:

import { fireEvent } from "@testing-library/react";
fireEvent.change(emailInput, { target: { detail: { value: {"test@email.com" }}});

None of these methods get me what I need which is the value for these inputs being updated in the test. Any ideas?

Rikin Patel • Jul 22 '20

You can probably do debug() from testing library after each fired event and see if the thing changed at all to investigate

Wendy • Jul 22 '20

I did do that, but it didn't change.

Aaron K Saunders • Jul 22 '20

put the id on the Controller and fire a onChange event don't use the ionic events

Wendy • Jul 22 '20

When I moved the data-testid='input-email' to the Controller component wrapper, now I get an error in the test:
TestingLibraryElementError: Unable to find an element by: [data-testid="input-email"]
I'm assuming because it is a custom component.

Aaron K Saunders • Jul 26 '20

can you put a simple project together on stackblitz?

Tim Proffitt • Oct 13 '20

Im curious what came of this - having the same issues :(

gvilomar • Aug 3 '23

Hi @aaronksaunders , I'm having an issue with Ionic 7, react-hook-form, and modals. If I submit the page and it finds errors, the error messages do not disappear even though I fix the error. Also, it can continue. I've watched several of your videos and read through many of your post but I cannot see what is wrong. See my code below. Let me know if you have any other suggestions I can try. Thanks in advance!

stackblitz code

gvilomar • Aug 3 '23

Sorry @aaronksaunders, the link above was for the app and not the code. Here's the code link:

code

Van Peuter Clément • Aug 15 '20

Hello, How do you reset the form ? Or how do you set values to the form (with a proper render of the form ?)

Aaron K Saunders • Aug 15 '20

you reset the form using the reset method from the hook... you set the form using the default values, it is funny that you asked because i was working on a blog post about that!!

Aaron K Saunders • Aug 16 '20

dev.to/aaronksaunders/using-contex...

Rikin Patel • Jul 17 '20

Thanks for this quick update