gesture: Angular Material breaks form ng-submit via enter/go button on iOS #3990
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 |
ThomasBurleson
added
for: internal contributor
topherfangio
added
needs: investigation
|
+1.. |
|
+1 |
|
+1 |
|
+1 |
|
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> |
|
+1 |
3 similar comments
|
+1 |
|
+1 |
|
+1 |
|
|
|
+1 |
|
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). |
|
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 |
|
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. |
|
This issue is closed as part of our ‘Surge Focus on Material 2' efforts. |
ThomasBurleson
added
the
has: Pull Request
Splaktar
changed the title
Splaktar
added
type: gestures
and removed
needs: investigation
and others
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
The text was updated successfully, but these errors were encountered: