Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

fix(checkbox): submit on enter rather than toggle #11584

Merged
merged 1 commit into from
Feb 1, 2019
Merged

fix(checkbox): submit on enter rather than toggle #11584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions src/components/checkbox/checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
codymikol marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this can possibly submit the form even when the button of type="submit" is disabled.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to align with the native behavior where pressing enter in an input will submit the form even if the form has no button.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More investigation and follow up in #11639.

}
break;
}
}

Expand Down
28 changes: 28 additions & 0 deletions src/components/checkbox/checkbox.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,34 @@ 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 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; };

Expand Down