fix(checkbox): submit on enter rather than toggle

make enter keypress submit form rather than toggle checkbox Fixes: angular#11583
codymikol · Jan 8, 2019 · 24df4a8 · 24df4a8
1 parent 9c079aa
commit 24df4a8
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 4 deletions.
diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
@@ -168,10 +168,19 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
 
       function keypressHandler(ev) {
         var keyCode = ev.which || ev.keyCode;
-        if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
-          ev.preventDefault();
-          element.addClass('md-focused');
-          listener(ev);
+        ev.preventDefault();
+        switch(keyCode) {
+          case $mdConstant.KEY_CODE.SPACE:
+            element.addClass('md-focused');
+            listener(ev);
+            break;
+          case $mdConstant.KEY_CODE.ENTER:
+            var form = $mdUtil.getClosest(ev.target, 'form');
+            //We have to use a native event here as the form directive does not use jqlite
+            if(form) {
+              form.dispatchEvent(new Event('submit'));
+            }
+            break;
         }
       }
 

diff --git a/src/components/checkbox/checkbox.spec.js b/src/components/checkbox/checkbox.spec.js
@@ -280,6 +280,39 @@ describe('mdCheckbox', function() {
       expect(isChecked(checkbox)).toBe(true);
     });
 
+    it('should set the checkbox to checked when focused and SPACE keypress event fired', function () {
+      var checkbox = compileAndLink('<md-checkbox ng-checked="value"></md-checkbox>');
+      checkbox.triggerHandler({
+        type: 'keypress',
+        keyCode: $mdConstant.KEY_CODE.SPACE
+      });
+      expect(isChecked(checkbox)).toBe(true);
+    });
+
+    it('should should NOT set the checkbox to checked when focused and ENTER keypress event fired', function () {
+      var checkbox = compileAndLink('<md-checkbox ng-checked="value"></md-checkbox>');
+      checkbox.triggerHandler({
+        type: 'keypress',
+        keyCode: $mdConstant.KEY_CODE.ENTER
+      });
+      expect(isChecked(checkbox)).toBe(false);
+    });
+
+    it('should submit a parent form when ENTER is pressed', function () {
+
+      var form = compileAndLink('<form><md-checkbox ng-checked="value"></md-checkbox></form>');
+
+      angular.element(form[0].getElementsByTagName('md-checkbox')[0]).triggerHandler({
+        type: 'keypress',
+        keyCode: $mdConstant.KEY_CODE.ENTER
+      });
+
+      pageScope.$apply();
+
+      expect(form[0].classList.contains('ng-submitted')).toBe(true);
+
+    });
+
     it('should mark the checkbox as selected on load with ng-checked', function() {
       pageScope.isChecked = function() { return true; };