fix(checkbox): enter submits form when submit button is disabled

match the behavior of the native input type checkbox

Fixes #11639

src/components/checkbox/checkbox.js

@@ -169,19 +169,34 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
         }
       }
 
+      /**
+       * @param {KeyboardEvent} ev 'keypress' event to handle
+       */
       function keypressHandler(ev) {
         var keyCode = ev.which || ev.keyCode;
+        var button, input, form;
+
         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
+            // Match the behavior of the native input type="checkbox".
+            // It's important that MouseEvent is used here versus Event in order to match the native
+            // behavior and properly trigger ng-submit.
+            form = $mdUtil.getClosest(ev.target, 'form');
             if (form) {
-              form.dispatchEvent(new Event('submit'));
+              button = form.querySelector('button[type="submit"]:enabled');
+              if (button) {
+                button.dispatchEvent(new MouseEvent('click'));
+              } else {
+                input = form.querySelector('input[type="submit"]:enabled');
+                if (input) {
+                  input.dispatchEvent(new MouseEvent('click'));
+                }
+              }
             }
             break;
         }

src/components/checkbox/checkbox.spec.js

@@ -298,14 +298,14 @@ describe('mdCheckbox', function() {
       expect(isChecked(checkbox)).toBe(false);
     });
 
-    it('should submit a parent form when ENTER is pressed', function () {
+    it('should not 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);
+      expect(form[0].classList.contains('ng-submitted')).toBe(false);
     });
 
     it('should mark the checkbox as selected on load with ng-checked', function() {

src/core/util/util.js

@@ -537,7 +537,8 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
      * @param {string|function} validateWith If a string is passed, it will be evaluated against
      * each of the parent nodes' tag name. If a function is passed, the loop will call it with each
      * of the parents and will use the return value to determine whether the node is a match.
-     * @param {boolean} onlyParent Only start checking from the parent element, not `el`.
+     * @param {boolean=} onlyParent Only start checking from the parent element, not `el`.
+     * @returns {Node|null} closest matching parent Node or null if not found
      */
     getClosest: function getClosest(el, validateWith, onlyParent) {
       if (angular.isString(validateWith)) {