Material: gesture: Angular Material breaks form ng-submit via enter/go button on iOS

Created on 3 Aug 2015 · 29Comments · Source: angular/material

If you have a form with ng-submit, pressing enter on a iOS device (with both chrome and safari), will not trigger the ng-submit function. This works as expected with angularjs alone but with the addition of angular material, it no longer works.

Working (without ngMaterial)
http://embed.plnkr.co/Cs3QTjaN6GdnfL1vOKNl/preview

Not working (with ngMaterial)
http://embed.plnkr.co/F0qVeaIxNnBlLHgVKQ5Z/preview

- Lots of Comments urgent internal contributor Pull Request fixed bug gestures integration

Source

wlingke

Most helpful comment

Indeed, with type="submit" and the button inside the <form> element, it works for me too

julienpa on 9 Jan 2016

👍2

All 29 comments

I think I have the same issue when trying to submit a form with Angular (1.4.3) and Angular Material (0.10.1) by pressing enter: the ng-submit is not triggered, whereas it works well when there is a simple md-button inside the form

julienpa on 14 Aug 2015

+1..
Same issue here, using angular 1.4.5, Materials 0.10.1

mackelito on 30 Sep 2015

+1
it worked for me on 0.11.2 but broke on 1.0

aogut on 26 Oct 2015

jamalx31 on 1 Nov 2015

tonyawad88 on 17 Nov 2015

I definitely see the issue within the Plunkr; however, when I extracted it into a simple HTML file on my own iPad to reproduce, the issue disappears. I am running iOS 9, so perhaps that is part of the difference?

Note that the Plunkr fails on Chrome on desktop as well as iOS.

Can someone double-check my code below and let me know if there is something specific you are doing to reproduce, or if it's only a particular version of iOS, because it appears to be working to me?

_P.S. I've added a comment for testing against master as well to see if it was fixed, but I can't reproduce with either of them loaded._

<!doctype html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
    <!--
    <script src="https://material.angularjs.org/HEAD/angular-material.min.js"></script>
    //-->
  </head>

  <body ng-app="app">
    <div ng-controller="Ctrl">

      <form name="testForm" ng-submit="submit(test)">
        <input type="text" ng-model="test">
        <input type="submit">
      </form>

    </div>

    <script typ="text/javascript">
      angular.module('app', ['ngAnimate'])
      .controller('Ctrl', function Ctrl($scope) {
        $scope.submit = function(value){
          alert(value)
        }
      })
    </script>
  </body>
</html>

topherfangio on 23 Nov 2015

+1 same problem here:

iOS 9.1 (13B143) on an iPhone 5 (Model A1429)

mjaverto on 23 Nov 2015

Also problem in iOS Simulator for iPhone 6, iOS 9.1 (13B137)

"angular-material": "v1.0.0-rc4"

Confirmed working in 0.11.2 but tons of other issues came up when we downgrade there.

mjaverto on 23 Nov 2015

+1 seeing same issue as @mjaverto

rjdavis3 on 23 Nov 2015

@mjaverto @rjdavis3 Can one of you please provide a simple HTML example like above (i.e. not a Codepen/Plunkr) that demonstrates this? As I said, I am unable to reproduce and need a little bit of help seeing exactly what code makes it break.

Thanks!

topherfangio on 23 Nov 2015

@topherfangio sure. I know this is a plunkr but just copy the HTML out easily.

http://plnkr.co/edit/miCYIujo5vwNH0PgbJOE?p=preview

I just loaded this in an iOS iPhone 6 simulator running 9.1 to confirm. I should also note, the above does work on 0.11.2.

mjaverto on 24 Nov 2015

Thanks! I can confirm and will look into it.

topherfangio on 24 Nov 2015

It doesn't appear this was fixed in a 1.0 release candidate. I'm experiencing this problem with the latest version, on Windows 10 desktop chrome version 47.0.2526.106 m.

lewiswharf on 30 Dec 2015

👍1

@lewiswharf Indeed, this is still an open issue on our radar.

topherfangio on 30 Dec 2015

👍1

add type="submit" to your md-button and it worked for me

chrishawn on 8 Jan 2016

Indeed, with type="submit" and the button inside the <form> element, it works for me too

julienpa on 9 Jan 2016

👍2

type="submit" worked! Seems logical.

lewiswharf on 10 Jan 2016

adding type="submit" did not help me. iOS 9.2 AngularMaterial 11.2.

Working (with 1 input):

    <form ng-submit="login()">
          <md-input-container>
            <label>Email</label>
            <input ng-model="user.email" type="email" >
          </md-input-container>
        </form>

Not Working:

    <form ng-submit="login()">
        <md-input-container>
            <label>Email</label>
            <input ng-model="user.email" type="email" >
        </md-input-container>

        <md-input-container>
          <label>Password</label>
          <input ng-model="user.password" type="password">
        </md-input-container>
      </form>

temporary Solution:

<input ng-model="user.password" type="password"  ng-keypress="keyPressed($event)">

    $scope.keyPressed = function(keyEvent) {
      if (keyEvent.keyCode === 13) {
        cordova.plugins.Keyboard.close();
      }
    };

jfbloom22 on 28 Jan 2016

👍1

oh-wo on 3 Feb 2016

linslin on 4 Mar 2016

reppners on 8 Mar 2016

mseemann-imatics on 10 Mar 2016

maenthoven on 30 Mar 2016

type="submit" worked for me on Mac OSX (Chrome).

vikasgulati on 1 Apr 2016

rcheuk on 15 Apr 2016

This may help some who are following this thread. It appears the plunkr provided by @mjaverto has an 'action' property defined, which appears to break the submit functionality wrapped into the ngForm directive. Around line 21916 of angular.js (I'm looking at v1.5.5).

cjardmore on 3 May 2016

It appears this issue may be linked to ios keyboard not firing 'submit' event when 'Enter' key is pressed.

Without additional meditation / testing I can't say I can suggest an approach to solving this.

Just in case my comments are not relevant to all issues here, here's a little about my env / issue. I'm debugging an Apache Cordova app. The behavior I'm trying to achieve is for the 'Enter' key on ios keyboard to submit the form regardless of which input field within the form the cursor is focused on.

Running v1.5.5 angular v1.0.7 material, ios 9.3.1, cordova 6.1.1, cordova-plugin-crosswalk-webview 1.6.1

cjardmore on 3 May 2016

What I've decided I need to do for the time being is provide 2 different "submit" options. One 'path' is looking for a 'keyup' event if it's an ios device. The other is falling back to the normal form submit functionality. As a precaution, I'm excluding ios devices from the normal submit action to prevent double-submit on ios devices in case a future update fixes this behavior.

The above change required me to add an 'ng-click' event to any buttons that were intended to submit the form. Again, for all possible actions to submit the form I'm detecting the device (via cordova's device plugin, which provides a 'platform' attribute) to ensure that one path is ios devices only, and the other path is everyone else.

NOTE: For regular web apps the device detection mentioned above may not be as straightforward or reliable. In Apache Cordova window.device.platform will equal the exact string 'ios', 'android', etc depending on the device the app is running in.

cjardmore on 12 May 2016

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.