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
- 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/
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.@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 🙂