question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: IonButton type="submit" does not submit form when enter pressed in inputs

See original GitHub issue

Bug Report

Ionic version: [x] @ionic/react 4.9.0-rc.2

Current behavior: IonButtons created with type="submit" do not submit the forms when a user presses the “enter” key in an input field.

You can see that the generated Shadow DOM input does NOT contain the type="submit" attribute.

IonButton Submit

Expected behavior: Standard HTML buttons created with type="submit" will automatically attempt to submit the form when the user presses “enter” in an input field. For accessibility, IonButtons inside a form should do the same.

Steps to reproduce: In the form below, press the “enter” key and observe that the form does not attempt to submit. Related code:

<form onSubmit={handleSubmit1}>
  <IonItem>
    <IonLabel>Ionic Input</IonLabel>
    <IonInput
      name="ionicInput1"
      id="ionicInput1"
      placeholder="Press enter in this field"
    />
  </IonItem>
  <IonItem>
    <label for="genericInput1">Generic Input</label>
    <input
      type="text"
      name="genericInput1"
      id="genericInput1"
      placeholder="Press enter in this field"
    />
  </IonItem>
  <IonButton type="submit">Submit</IonButton>
</form>

Working sample that demonstrate a regular <button type="submit">Submit</button> does properly submit the form and that an IonButton type="submit"/> does not:

Other information: None

Ionic info:

Ionic:

   Ionic CLI       : 5.2.5 (/Users/jn/.nvm/versions/node/v10.16.3/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 4.9.0-rc.2

Utility:

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

System:

   NodeJS : v10.16.3 (/Users/jn/.nvm/versions/node/v10.16.3/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:10
  • Comments:24 (5 by maintainers)

github_iconTop GitHub Comments

11reactions
StanLindseycommented, Nov 26, 2019

Adding type="submit" does affect the shadon-dom correctly for me - but it doesn’t allow the enter key to submit the form. A hidden input does work on the other hand. This feels wrong though.

11reactions
5im0ncommented, Sep 17, 2019

Issue already closed one year ago #15136

Read more comments on GitHub >

github_iconTop Results From Across the Web

What is preventing my form to be submitted on enter key press?
The default behavior of the keydown event is to submit the form. Example with preventDefault : document.querySelector('input').
Read more >
Ioinc 4 - form and submit button - Ionic Forum
The submit function from my .ts file is not working, but when a change <ion-button type="submit" [disabled]="!
Read more >
does not submit the form when the "enter button" is pressed on ...
I need authorization to occur when the enter button is pressed from the password input field. I really ask for help in solving...
Read more >
ionic 4 form submit on enter
Bug Report Ionic version: [ ] 4.x [x] 5.x.x Current behavior: Nothing happens when pressing the enter key in a form containing the...
Read more >
Javascript: prevent double form submission - The Art of Web
Presenting a 'please wait' message while the form is submitting. ... clicking on the submit button or pressing Enter in a text input...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found