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

[joeldacuma]

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

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[sean-perkins]

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.

[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?

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[sean-perkins]

Follow-up on this issue since I haven't heard back on the reproduction. I've been able to validate this issue exists with react-hook-forms and a standard form implementation with Ionic React.

I'll capture this as a bug and see if adjusting the type signature for the min/max solves the incompatibilities.

Thanks!

[sean-perkins]

PR #24657 will fix the type conflict between Ionic React and react-hook-form.

In the interim, you can use this dev build to test with:

npm i @ionic/[email protected]

You may need to delete @ionic/core from node_modules prior to installing, so that the correct package is installed with the updated types.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.