bug:

[phancox]

Bug Report

IonButton not reacting to "Enter" on form with react-hook-form. Occurs in browser under chrome, not tried on mobile.

Ionic version:
[x] 5.1.0

Current behavior:
Using IonButton with react-hook-form. When standard <button> is used expected behaviour of running "onSubmit" runs when "Enter" is pressed within a form field. If <button> is changed to <IonButton> then "Enter" does not run onSubmit, the IonButton must be pressed.

Expected behavior:
When <IonButton type="submit"> is placed on react-hook-form and "Enter" is pressed while in form input field, the "onSubmit" function should be run.

Steps to reproduce:
Hope it's OK but I'll reference the code from this article https://medium.com/better-programming/how-to-use-react-hook-form-with-ionic-react-components-eaa4426d8a2d

There is a related CodeSandbox.io project here: https://codesandbox.io/s/react-hook-form-ionic-input-components-29zur

Run the project, complete the form validation, and press "Enter" while in a form input field. Nothing will happen,

Modify the code of the submit button changing <IonButton> to <button> and repeat the exercise.
This time the onSubmit function will run and a popup will display the form fields.

Related code:
As above

Other information:

Ionic info:
This is from my own project which exhibits the same behaviour:

Ionic:

Ionic CLI : 6.9.3 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.1.0

Capacitor:

Capacitor CLI : 2.0.1
@capacitor/core : 2.0.1

Utility:

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

System:

NodeJS : v12.17.0 (/usr/bin/node)
npm : 6.14.4
OS : Linux 4.19

[liamdebeasi]

Thanks for the issue. Does this still reproduce without the use of react-hook-form? It may just be that react-hook-form does not support Ionic fully.

[phancox]

Sorry, haven't tried that. Only just learning to work with this technology stack. It's just gone 23:30 here so I will test that tomorrow. THANKS Peter Hancox | Consulting Architect *D **DELTA Technology Consulting* | p +61 2 9420 1800 | m +61 418 426 269 | skype phancox

…

On Wed, 3 Jun 2020 at 23:27, Liam DeBeasi ***@***.***> wrote: Thanks for the issue. Does this still reproduce without the use of react-hook-form? It may just be that react-hook-form does not support Ionic fully. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#21427 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFNPQ6MR6YLMQNLY7OJX4TRUZFU5ANCNFSM4NRTUHSQ> .

[phancox]

Seems to be an issue without react-hook-form as well. ionic start ionic-form blank Replace Home.tsx with the following. Put the cursor in the Test Input field and press Enter. Nothing happens. Replace IonButton with button and repeat. This time the alert is shown when Enter is pressed in the input field. import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonButton } from '@ionic/react'; import React from 'react'; import './Home.css'; const Home: React.FC = () => { return ( <IonPage> <IonHeader> <IonToolbar> <IonTitle>Blank</IonTitle> </IonToolbar> </IonHeader> <IonContent> <form> <IonInput>Test Input</IonInput> <IonButton type="submit" onClick={() => {alert("Form Submitted")}}

Submit</IonButton>

</form> </IonContent> </IonPage> ); }; export default Home; Peter Hancox | Consulting Architect *D **DELTA Technology Consulting* | p +61 2 9420 1800 | m +61 418 426 269 | skype phancox

…

On Wed, 3 Jun 2020 at 23:27, Liam DeBeasi ***@***.***> wrote: Thanks for the issue. Does this still reproduce without the use of react-hook-form? It may just be that react-hook-form does not support Ionic fully. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#21427 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFNPQ6MR6YLMQNLY7OJX4TRUZFU5ANCNFSM4NRTUHSQ> .

[liamdebeasi]

Thanks for the follow up. So the reason why this is happening is buttons in the Shadow DOM are not picked up by the parent form. In this case, clicking the button and pressing "Enter" would normally not submit the form.

We added some code to submit the form when you click the button: https://github.com/ionic-team/ionic/blob/master/core/src/components/button/button.tsx#L155

The issue still persists for pressing "Enter". I will look into adding a fix for this in Ionic Framework, but for now you can add a keyup listener on the form to work around this limitation.