What is preventing my form to be submitted on enter key press?

Question

I've the following ionic/angular form:

  <form class="ion-margin" [formGroup]="loginForm" (submit)="register()">
    <ion-item lines="none">
      <h1 style="text-align: center; width: 100%">Welcome to diskOver!</h1>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Name</ion-label>
      <ion-input type="email" formControlName="displayName" autofocus="true" ></ion-input>
    </ion-item>
    <app-form-error-message [errorMessages]="validationMessages.displayName" [sourceControl]="loginForm.get('displayName')">
    </app-form-error-message>

    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" formControlName="email" autofocus="true" inputmode="email"></ion-input>
    </ion-item>
    <app-form-error-message [errorMessages]="validationMessages.email" [sourceControl]="loginForm.get('email')">
    </app-form-error-message>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <app-form-error-message
      [errorMessages]="validationMessages.password"
      [sourceControl]="loginForm.get('password')"
    >
    </app-form-error-message>
    <ion-item *ngIf="registerError">
      <ion-text color="danger" class="invalid-feedback"> <h4>{{registerError}}</h4></ion-text>
    </ion-item>

    <ion-row>
      <ion-grid>
        <ion-row class="ion-justify-content-center">
          <ion-col size="10" size-sm="12">
            <ion-button
              type="submit"
              color="success"
              expand="block"
              [disabled]="loginForm.dirty && !loginForm.valid"
              >Register</ion-button
            >
          </ion-col>
        </ion-row>
        <ion-row class="ion-justify-content-center">
          <ion-col size="5" size-sm="6">
            <ion-button (click)="goToLogin()" size="small" expand="block">Login instead</ion-button>
          </ion-col>
          <ion-col size="5" size-sm="6">
            <ion-button (click)="goToPasswordLost()" size="small" expand="block">Lost password?</ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-row>
  </form>

Why, when I press enter while still being in the password field, my form isn't submitted?

According to what I see here: https://stackoverflow.com/a/37579380/397830 it should, right?

Here is the code that the ion-button generates(sorry about the image, but since there is shadow elements, didn't know how to copy):

Should work. Try adding an actual input type submit and hide it with css. — bryan60, Sep 14 '20 at 16:22
Could you try with `(ngSubmit)` ? https://angular.io/guide/forms#submit-the-form-with-ngsubmit — Emilien, Sep 14 '20 at 16:22
@bryan60 If I add a `", this works, but that's not the point to add 2 sign-in buttons in each of my forms — J4N, Sep 14 '20 at 16:39
ok so `ion-button` apparently doesnt properly implement type submit, and the form submit event NEEDS a submit type input or button in the form for it to work. mobile apps prob arent expecting to handle keyboard support that well. you could hide the submit input or you could bind to `(keyup.enter)` instead — bryan60, Sep 14 '20 at 16:41
@bryan60 yes, but not really the point to bind another event, I'm looking how to make this ionic button work — J4N, Sep 14 '20 at 16:43
I just told you the work arounds, you can hide an input with type submit in the form or bind to a different event. or register a bug/ feature request with ionic to properly implementing the button type submit and wait for them to address, or implement it yourself. the submit event WILL NOT fire without an input or button of type submit. — bryan60, Sep 14 '20 at 16:44
Workaround is for when you got bugs, not to use in a normal situation. — J4N, Sep 14 '20 at 16:47
not true. work arounds are for limitations. whether they're bugs or not is irrelevant. there is a limitation on `ion-button` that it doesn't implement the type submit properly to make the submit event work. so you can use one of the work arounds I mentioned, or NOT use `ion-button` or fix `ion-button` yourself to remove the limitation. Either way, you don't seem to want to hear that these are your only options. so best of luck to you. — bryan60, Sep 14 '20 at 16:50
FWIW a cursory search on this issue says it was a bug 2 years ago that has been fixed, so unless its popped up again, you may be using an outdated ionic version. — bryan60, Sep 14 '20 at 16:54
@bryan60 I'm using ionic v5.0.0 which is supposedly already having this fix. And since there was a bug with this not working, I guess it should NOT be a limitation, this is not the expected behavior. — J4N, Sep 14 '20 at 16:56
it's a limitation caused by a bug in ionic. You can work around it or find a new button component. options haven't changed. — bryan60, Sep 14 '20 at 17:00

Guerric P · Answer 1 · 2020-09-22T09:33:12.460

1

The default behavior of the keydown event is to submit the form. Example with preventDefault:

document.querySelector('input').addEventListener('keydown', e => e.preventDefault());

<form>
    <input>
    <button>Submit</button>
</form>

Example without preventDefault:

<form>
    <input>
    <button>Submit</button>
</form>

This is just native web, now in Angular, as you're using reactive forms you should use the ngSubmit event and check the HTML generated by the ion-button to verify if there is an actual button tag.

Edit:

As Ionic uses Web components for rendering, this may cause disruptions in the native form behavior, I have managed to reproduce your problem with this minimal code:

customElements.define('web-component', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<input>`;
  }
});

<form>
    <web-component></web-component>
    <button>Submit</button>
</form>

It shows that the issue comes from the input that is enclosed in a web component. Here is the GitHub issue related to this bug (still open as I write this).

The workaround suggested on GitHub is to add a <input type="submit" style="visibility: hidden; position: absolute; left: -1000px;" /> while the bug is not fixed.

edited Sep 22 '20 at 09:33

answered Sep 14 '20 at 16:38

Guerric P

30,447
6
48
86

ngSubmit was my first choice, but doesn't work either. If I add an ``it does work(but not really the goal to duplicate my buttons – J4N Sep 14 '20 at 16:40
What is the HTML generated by `ion-button`? A `button` with no `type` should be enough as you can see in my demo (because `submit` is the default `type`) – Guerric P Sep 14 '20 at 16:46
I added the html generated by the ion-button. It does generate a ` – J4N Sep 14 '20 at 16:54
1

Got it when I saw your answer edition, the button component is a [Web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so it cannot interact with the rest of the page. Either find a way to render the button in a native way, or implement the submit behavior yourself with a `keydown.enter` or whatever. – Guerric P Sep 14 '20 at 16:55
Okay, what would you advise then? – J4N Sep 14 '20 at 16:57
To render the component in a native way, but I don't know Ionic enough to tell you if it's possible and how – Guerric P Sep 14 '20 at 16:59
It looks like it's not possible when reading this: https://forum.ionicframework.com/t/how-disable-the-shadow-dom-in-ionic-4/160539 – Guerric P Sep 14 '20 at 17:01
But should I open a bug because a `` doesn't trigger the submit even when I press enter? – J4N Sep 14 '20 at 17:05
Actually according to this: https://javascript.info/shadow-dom-events a `keydown` event should bubble and cross the shadow DOM. Could you try adding manually an event listener on a parent element between `form` and `ion-button` and show us what the event looks like (if it exists)? – Guerric P Sep 14 '20 at 17:10
Sure, but on what event? – J4N Sep 14 '20 at 17:19
I did open an issue: https://github.com/ionic-team/ionic-framework/issues/22088 If you think you have anything to add(you seem to have a much better knowledge of the WebComponent that my non-existant one) feel free to add something – J4N Sep 14 '20 at 19:01
1

I have added a link to this question, so the contributors can quickly identify if this is the real cause – Guerric P Sep 14 '20 at 19:08

What is preventing my form to be submitted on enter key press?

1 Answers1