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.

Implicit form submit doesn't work in Ionic 4

See original GitHub issue

Bug Report

@ionic/core@4.0.0-beta.11 @stencil/core@0.12.4

Describe the Bug

I created a login form (started with the Ionic Stencil PWA Starter) using form, ion-input and ion-button. When I try to implicitly submit the form by pressing enter in one of the inputs, the form does not get submitted, despite my button having the type="submit" attribute set.

Steps to Reproduce

  1. Create a form
  2. Focus on one of the inputs
  3. Press enter
  4. Nothing happens

Related Code

Fiddle: http://jsfiddle.net/ok8zn5e6/2/

<ion-list>
  <form onSubmit={e => this.submitLogin(e)}>
    <ion-item>
      <ion-label position="stacked">
        Email
      </ion-label>
      <ion-input name="username" type="email" placeholder="you@domain.com" required autofocus />
    </ion-item>
    <ion-item>
      <ion-label position="stacked">
        Password
      </ion-label>
      <ion-input name="password" type="password" placeholder="********" required />
    </ion-item>

    <ion-button type="submit" color="primary">
      <ion-icon slot="end" name="log-in" />
      Log In
    </ion-button>
  </form>
</ion-list>

Expected Behavior

The implicit form submit should work because the form contains a button with type="submit".

Additional Context

http://stonefishy.github.io/blog/2015/06/30/implicit-submission-of-form-when-pressing-enter-key/

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:16 (12 by maintainers)

github_iconTop GitHub Comments

3reactions
paulstelzercommented, Dec 10, 2018

@simonhaenisch Thanks for your response. I will not open this issue because we already have two which seperate this issues very well:

#15136: Button does not trigger ngSubmit #16498: Prev / Next button on mobile keyboard

So it’s not useful to have different issues opened for the same topic. Is that okay for you 😃

3reactions
ajcritescommented, Dec 6, 2018

I think that a more permanent solution may be in order – this is standard / expected behavior. This would require implementing a (keyup.enter) on every form input that performed the form submission and dismissed the keyboard as necessary. You would also have to duplicate the form submission handling for (ngSubmit) because users could still tap the submit button itself.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ionic4 ngSubmit is not firing on submit - Stack Overflow
ngSubmit is reloading the complete page and hence its hitting only login constructor but not the respective method. Removed (ngSubmit) on ...
Read more >
Form (submit) not working on android - Ionic Forum
Hello all, I have a really simple form and the submit is not working on android platform keyboard. (works with serve and ios)...
Read more >
Implicit form submission doesn't work always - Stefan Judis
It turns out that this is only possible under two conditions: the form has a submit button. the form has only one input...
Read more >
Ionic Tutorial - Forms and Validations in ionic 5
In this tutorial you will learn everything about Ionic forms and input validations in Ionic apps. We will discuss the best practices for ......
Read more >
Deprecated APIs and features - Angular
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and can be...
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