feat(mdRadioGroup): Radio submits on keydown/enter

Closes #577
angular · Jan 8, 2015 · 03c7592 · 03c7592
1 parent bfc947f
commit 03c7592
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 9 deletions.
diff --git a/src/components/radioButton/demoBasicUsage/index.html b/src/components/radioButton/demoBasicUsage/index.html
@@ -1,5 +1,5 @@
 
-<div ng-controller="AppCtrl" >
+<form ng-submit="submit()" ng-controller="AppCtrl" >
     <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
 
     <md-radio-group ng-model="data.group1">
@@ -30,4 +30,4 @@
       <md-button ng-click="removeItem()">Remove</md-button>
     </p>
 
-</div>
+</form>
diff --git a/src/components/radioButton/demoBasicUsage/script.js b/src/components/radioButton/demoBasicUsage/script.js
@@ -15,6 +15,10 @@ angular.module('radioDemo1', ['ngMaterial'])
     { label: '4', value: '4' }
   ];
 
+  $scope.submit = function() {
+    alert('submit');
+  };
+
   $scope.addItem = function() {
     var r = Math.ceil(Math.random() * 1000);
     $scope.radioData.push({ label: r, value: r });

diff --git a/src/components/radioButton/radioButton.js b/src/components/radioButton/radioButton.js
@@ -65,13 +65,25 @@ function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming) {
     var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
 
     function keydownListener(ev) {
-      if (ev.keyCode === $mdConstant.KEY_CODE.LEFT_ARROW || ev.keyCode === $mdConstant.KEY_CODE.UP_ARROW) {
-        ev.preventDefault();
-        rgCtrl.selectPrevious();
-      }
-      else if (ev.keyCode === $mdConstant.KEY_CODE.RIGHT_ARROW || ev.keyCode === $mdConstant.KEY_CODE.DOWN_ARROW) {
-        ev.preventDefault();
-        rgCtrl.selectNext();
+      switch(ev.keyCode) {
+        case $mdConstant.KEY_CODE.LEFT_ARROW:
+        case $mdConstant.KEY_CODE.UP_ARROW:
+          ev.preventDefault();
+          rgCtrl.selectPrevious();
+          break;
+
+        case $mdConstant.KEY_CODE.RIGHT_ARROW:
+        case $mdConstant.KEY_CODE.DOWN_ARROW:
+          ev.preventDefault();
+          rgCtrl.selectNext();
+          break;
+
+        case $mdConstant.KEY_CODE.ENTER:
+          var form = angular.element($mdUtil.getClosest(element[0], 'form'));
+          if (form.length > 0) {
+            form.triggerHandler('submit');
+          }
+          break;
       }
     }
 

diff --git a/src/components/radioButton/radioButton.spec.js b/src/components/radioButton/radioButton.spec.js
@@ -140,6 +140,29 @@ describe('radioButton', function() {
       expect($rootScope.color).toBe('blue');
     }));
 
+    it('should trigger a submit', inject(function($compile, $rootScope, $mdConstant) {
+
+      $rootScope.testValue = false;
+      $rootScope.submitFn = function(){
+        $rootScope.testValue = true;
+      };
+      var element = $compile('<div><form ng-submit="submitFn()">' +
+                              '<md-radio-group ng-model="color">' +
+                              '<md-radio-button value="white"></md-radio-button>' +
+                              '</md-radio-group>' +
+                            '</form></div>')($rootScope);
+
+      var formElement = element.find('form'),
+          rbGroupElement = element.find('md-radio-group');
+
+      rbGroupElement.triggerHandler({
+        type: 'keydown',
+        keyCode: $mdConstant.KEY_CODE.ENTER
+      });
+
+      expect($rootScope.testValue).toBe(true);
+    }));
+
     it('should be disabled', inject(function($compile, $rootScope) {
       var element = $compile('<md-radio-group ng-model="color">' +
                               '<md-radio-button value="white" ng-disabled="isDisabled"></md-radio-button>' +

diff --git a/src/core/util/util.js b/src/core/util/util.js
@@ -157,6 +157,21 @@ angular.module('material.core')
       } else {
         parent.$$childHead = parent.$$childTail = child;
       }
+    },
+  /*
+   * getClosest replicates jQuery.closest() to walk up the DOM tree until it finds a matching nodeName
+   *
+   * @param el Element to start walking the DOM from
+   * @param tagName Tag name to find closest to el, such as 'form'
+   */
+    getClosest: function getClosest(el, tagName) {
+      tagName = tagName.toUpperCase();
+      do {
+        if (el.nodeName === tagName) {
+          return el;
+        }
+      } while (el = el.parentNode);
+      return null;
     }
   };