Ionic 4 Button does not trigger ngSubmit

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : none

System:

   ios-deploy : 1.9.1
   ios-sim    : 5.0.13
   NodeJS     : v9.5.0 (/usr/local/Cellar/node/9.5.0/bin/node)
   npm        : 5.6.0
   OS         : OS X El Capitan
   Xcode      : Xcode 8.0 Build version 8A218a

Environment:

   ANDROID_HOME : not set

Describe the Bug <ion-button type="submit"> does not trigger NgForm ngSubmit any longer after upgrading to ionic 4. The intended behavior is referenced in the previous version here: https://ionicframework.com/docs/developer-resources/forms/

Steps to Reproduce Steps to reproduce the behavior:

1. Create a form like <form (ngSubmit)="onSignup(form)" #form="ngForm"> containing <ion-button expand="full" type="submit">Sign up</ion-button>
2. Submit the form using the enter key
3. onSignup is not triggered.

Related Code The previous behavior that should happen is referenced here: https://ionicframework.com/docs/developer-resources/forms/

Expected Behavior ngSubmit event to be triggered on either submiting form by enter keypress or by clicking the submit button.

[paulstelzer]

Ah thanks for this good answer!

The reason for this: Edge is not using Shadow DOM, so there it’s all plain. That’s the reason why the normal input enter is working there. But the good news is that Edge (better EdgeHTML) will be removed in future 😄 They also will use Chromium. But all older browsers without shadow dom (e.g. Firefix <63) also affected.

I think we have to find a solution for it. One could be do add a variable to the function that will be set to true / false (isSubmitted). Not a good workaround, but a workaround. I will share it with the Ionic dev team if there is another (better) solution.

[codybeebework]

The title of this issue and OP’s steps to reproduce (step 2) are not in agreement so no worries. We came to the same conclusion, using keyup.enter to mimic what a normal html form provides.

I’ve pulled your git repo and was able to confirm that the keyup events for enter were giving the desired effect, and reveals the same bug I ran into. This breaks what was already working in Microsoft Edge. Before adding the keyup events to the input fields, Edge was recognizing hitting enter as a form submission. After adding the events, Edge will fire the form submission twice: once for the normal html form submission and once again because of our manual event being fired.

I’m still new to what the Shadow DOM provides and restricts, but I was under the impression that it is related only to styling, not functionality. If that’s not the case, how might Edge be ignoring it?

To add more to the work around, you can remove type="submit" from the submit button and replace it with the manual keyup.enter event the input fields have. Doing this makes the effect consistent across Chrome, Firefox, and Edge at the least (I have yet to test other browsers).

If it is not because of the Shadow DOM, then I hope this could be fixed in a future Ionic update.

Thanks for the quick response.