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.

Issue already closed one year ago #15136

Using an ion-button with type="submit" inside a form with only one input works. As soon as there is more than one input inside the form, it doesn’t work anymore. 🤔

any updates?

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

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

This keeps happening for us, but strangely only for tactile events from touch screens or simulated touch screens through browser dev tools. It works fine for mouse clicks. Quite worrysome that the submit button in a mobile UI framework does not do its only job in a mobile device.

Maybe the easiest and least problematic fix is to not use shadow DOM for this component, the same as other form-related components like input?

I am able to reproduce this, and the bug does not seem to be limited to just Ionic React apps.

The reason why this is happening is buttons in the Shadow DOM are not picked up by the parent form. In this case, clicking the button and pressing “Enter” would normally not submit the form.

We added some code to submit the form when you click the button: https://github.com/ionic-team/ionic/blob/master/core/src/components/button/button.tsx#L155

The issue still persists for pressing “Enter”. I will look into adding a fix for this in Ionic Framework, but for now you can add a keyup listener on the form to work around this limitation.

this still an issue as of sep 2021

I’m having to fake a submit button inside the form as workaround

This seems to be an issue with the way WebComponents/shadow-dom work in general (they are working on a solution). Adding the hidden input field seems to work, albeit its pretty hacky. From a consistency perspective i would want Ionic button to work exactly the same as native button, so what if ionic adds the hidden input submit button outside the shadow DOM until the spec comes up with a permanent fix. This inconsistency should be abstracted away from the library consumer.

@liamdebeasi sir can you help us, we have same problem into ionic angular latest 5.2.2 also, <ion-button color="danger" size="large" expand="block" type="submit" id="login_button" [disabled]="is_disable">SIGNIN&nbsp;<i class="fas fa-sign-in-alt"></i></ion-button>

When click on button it submit form but if press enter button then form not submitted.

Thanks in advance

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? 😉

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?