Implicit form submit doesn't work in Ionic 4
See original GitHub issueBug 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
- Create a form
- Focus on one of the inputs
- Press enter
- 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:
- Created 5 years ago
- Reactions:3
- Comments:16 (12 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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 😃
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.