bug: React-hook-Form v7 for ionic-react 6 IonInput props is not assignable

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

IonInput is not assigning types of props using register function of react-hook-form

Expected Behavior

props of register function using react-hook-form should be assignable to IonInput

Steps to Reproduce

import { useForm } from ‘react-hook-form’;

const { control, handleSubmit, register, setValue } = useForm({ defaultValues: { email: ‘’ } });

const {ref, onChange, …props} = register(‘email’, { required: true, })

<IonItem>
  <IonLabel>Email</IonLabel>
      <IonInput  {...props} />         
  </IonItem>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/joeldacuma/.nvm/versions/node/v14.17.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.0.1

Capacitor:

Capacitor CLI : 2.4.6 @capacitor/android : 2.4.6 @capacitor/core : 2.4.6 @capacitor/ios : 2.4.6

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v14.17.0 npm : 6.14.13 OS : macOS Monterey

Additional Information

No response

[joeldacuma]

Hello @joeldacuma thanks for reporting this issue.

Can you help explain to me the reasoning behind why ion-input should have the exact type signature as react-hook-form?

In your pseudo code you have left out what props is tied to, so I’m having a difficult time following the example.

An example repository would be great to visualize the issue.

Hi @sean-perkins ,

there is a compatibility issue for the max property for react-hook-form and IonInput for Ionic 6. This is working fine using Ionic 5 with react-hook-form v7.

Here is the reference for Ionic5 react-hook-form v7: https://github.com/alanmontgomery/ionic-react-hook-form-example/blob/main/src/pages/Home.js

Here is the error I encountered in Ionic6:

[sean-perkins]

Thanks for the extra detail. I’m unable to pinpoint a specific change in v6 that would have regressed this behavior. The type signature for min/max has aligned with the HTML Spec for being a string | date (date string) since April 2018.

It looks like the type signature from the implementation using react-hook-form is incorrect (string | number | undefined).

Could you isolate this behavior in a repository, with a branch on v5 and a branch on v6?