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

[calendee]

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.

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:

• https://codesandbox.io/s/ionic-react-rc2-inputs-submit-button-doesnt-work-issue-19368-pzdtu

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

[5im0n]

Issue already closed one year ago #15136

[W3THS]

I'm also experiencing this issue. Reading through #15136 is seems to suggest that this functionality only works when 1 input is on a form (which it does) and that is due to browsers implementation and not ionic. However, this does not explain why it works when you add a button with an input type of submit? If it was due to the browser it still shouldn't work?

[riffbyte]

This is not a bug with react or ionic, it is the way forms work on most of the browsers.

You can add a hidden submit input with absolute positioning like so:
JSX:
<input type="submit" className="submit-enter" />
CSS:

.submit-enter {
  position: absolute;
  visibility: hidden;
  left: -1000px;
}

This works on all desktop and mobile browsers

[W3THS]

Should setting the type of the ionic button to submit not cause the same functionality as having a hidden submit input though?

[riffbyte]

It probably should, if your button is inside the <form> tag.
I assumed that you had a similar issue that I had, when submit button couldn't be place inside the form.

[W3THS]

Yes the button is inside the form. It looks like the setting doesn’t do anything when it comes to the shadow DOM

[StanLindsey]

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.

[xQuai]

I would like to confirm that I also have this "error" in my project. I am also used to the fact that the form can be submitted by pressing the Enter key. Is there any news on this topic?

Versions:

Ionic:

   Ionic CLI       : 5.4.13 (C:\Users\<Username>\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework : @ionic/react 4.11.4

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

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

System:

   NodeJS : v10.14.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10

[Yohandah]

I have the same issue with the following code, I am using the angular material lib, with a ion-button. Pressing enter in any of the fields doesn't submit the form.

<form (ngSubmit)="performLogin()" [formGroup]="loginForm">
    <mat-form-field appearance="outline" color="primary">
      <mat-label>Login</mat-label>
      <input matInput type="text" formControlName="login" placeholder="Login" required />
      <mat-error *ngIf="loginForm.get('login').invalid">
        {{ loginForm.get("login").hasError("required") ? "Required" : "" }}
      </mat-error>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Password</mat-label>
      <input matInput type="password" formControlName="password" placeholder="Password" required />
      <mat-error *ngIf="loginForm.get('password').invalid">
        {{ loginForm.get("password").hasError("required") ? "Champ requis" : "" }}
      </mat-error>
    </mat-form-field>

    <ng-container *ngIf="!isProcessingLogin; then loginButton; else loading"></ng-container>

    <ng-template #loginButton>
      <ion-button [disabled]="!loginForm.valid" shape="round" type="submit">
        Login
      </ion-button>
    </ng-template>

    <ng-template #loading>
      <ion-spinner color="primary"></ion-spinner>
    </ng-template>
  </form>

I fixed it adding on my inputs : (keyup.enter)="loginForm.valid ? performLogin() : undefined" but it would be nice if it was working by default

[Hesesses]

Having the same problem with Ionic 5

<form [formGroup]="loginForm" class="login-form ion-no-padding" (submit)="login()">
          <ion-item>
            <ion-label position="stacked" translate>common.email</ion-label>
            <ion-input type="email" formControlName="email" [placeholder]="'login.placeholder_email' | translate"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label position="stacked" translate>common.password</ion-label>
            <ion-input type="password" formControlName="password" [placeholder]="'login.placeholder_password' | translate" ></ion-input>
          </ion-item>

          <div class="ion-text-right">
            <ion-button type="submit" shape="round" size="large"><ion-icon name="arrow-forward-outline"></ion-icon></ion-button>
          </div>
        </form>

Pressing enter doesnt fire the submit, clicking the button works

[SvenBudak]

Yeah i am also confused. When i change <ion-button type="submit"> to <button type="submit"> then it works well. I saw that this issue was already present in Ionic 4... Isnt it time to fix this? ;)

[AntonSimanikhin]

Same problem with Ionic 5 React. I thought having this type available for the IonButton component is the ability to submit on press Enter key. When is this going to be resolved?