Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

fix(input): listen on "change" for radio and checkbox #14685

Merged
merged 1 commit into from
Oct 13, 2017
Merged

fix(input): listen on "change" for radio and checkbox #14685

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
4 changes: 2 additions & 2 deletions src/ng/directive/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1820,7 +1820,7 @@ function radioInputType(scope, element, attr, ctrl) {
}
};

element.on('click', listener);
element.on('change', listener);

ctrl.$render = function() {
var value = attr.value;
Expand Down Expand Up @@ -1854,7 +1854,7 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
ctrl.$setViewValue(element[0].checked, ev && ev.type);
};

element.on('click', listener);
element.on('change', listener);

ctrl.$render = function() {
element[0].checked = ctrl.$viewValue;
Expand Down
7 changes: 6 additions & 1 deletion test/BinderSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,12 +401,17 @@ describe('Binder', function() {
expect(optionC.text()).toEqual('C');
}));

it('ItShouldSelectTheCorrectRadioBox', inject(function($rootScope, $compile) {
it('ItShouldSelectTheCorrectRadioBox', inject(function($rootScope, $compile, $rootElement, $document) {
element = $compile(
'<div>' +
'<input type="radio" ng-model="sex" value="female">' +
'<input type="radio" ng-model="sex" value="male">' +
'</div>')($rootScope);

// Append the app to the document so that "click" on a radio/checkbox triggers "change"
// Support: Chrome, Safari 8, 9
jqLite($document[0].body).append($rootElement.append(element));

var female = jqLite(element[0].childNodes[0]);
var male = jqLite(element[0].childNodes[1]);

Expand Down
7 changes: 6 additions & 1 deletion test/helpers/testabilityPatch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ function generateInputCompilerHelper(helper) {
};
});
});
inject(function($compile, $rootScope, $sniffer) {
inject(function($compile, $rootScope, $sniffer, $document, $rootElement) {

helper.compileInput = function(inputHtml, mockValidity, scope) {

Expand All @@ -341,6 +341,11 @@ function generateInputCompilerHelper(helper) {
// Compile the lot and return the input element
$compile(helper.formElm)(scope);

$rootElement.append(helper.formElm);
// Append the app to the document so that "click" on a radio/checkbox triggers "change"
// Support: Chrome, Safari 8, 9
jqLite($document[0].body).append($rootElement);

spyOn(scope.form, '$addControl').and.callThrough();
spyOn(scope.form, '$$renameControl').and.callThrough();

Expand Down
7 changes: 6 additions & 1 deletion test/ng/directive/booleanAttrsSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,15 @@ describe('boolean attr directives', function() {
}));


it('should not bind checked when ngModel is present', inject(function($rootScope, $compile) {
it('should not bind checked when ngModel is present', inject(function($rootScope, $compile, $document, $rootElement) {
// test for https://github.com/angular/angular.js/issues/10662
element = $compile('<input type="checkbox" ng-model="value" ng-false-value="\'false\'" ' +
'ng-true-value="\'true\'" ng-checked="value" />')($rootScope);

// Append the app to the document so that "click" triggers "change"
// Support: Chrome, Safari 8, 9
jqLite($document[0].body).append($rootElement.append(element));

$rootScope.value = 'true';
$rootScope.$digest();
expect(element[0].checked).toBe(true);
Expand Down
22 changes: 20 additions & 2 deletions test/ng/directive/inputSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3974,7 +3974,7 @@ describe('input', function() {

describe('radio', function() {

it('should update the model', function() {
they('should update the model on $prop event', ['click', 'change'], function(event) {
var inputElm = helper.compileInput(
'<input type="radio" ng-model="color" value="white" />' +
'<input type="radio" ng-model="color" value="red" />' +
Expand All @@ -3990,7 +3990,8 @@ describe('input', function() {
expect(inputElm[1].checked).toBe(true);
expect(inputElm[2].checked).toBe(false);

browserTrigger(inputElm[2], 'click');
if (event === 'change') inputElm[2].checked = true;
Copy link
Member

Choose a reason for hiding this comment

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

This looks fishy...

Copy link
Member

Choose a reason for hiding this comment

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

But then I guess you can't do much...

Maybe we should document that for custom checkboxes/radios, where the change event is triggered manually, you need to ensure .checked has been set first. Or maybe it's obvious and doesn't need documentation..

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is expected, I guess. This is exactly what bootstrap 3 does, see the example code here: #4516 (comment)

browserTrigger(inputElm[2], event);
expect($rootScope.color).toBe('blue');
});

Expand Down Expand Up @@ -4092,6 +4093,23 @@ describe('input', function() {
});


they('should update the model on $prop event', ['click', 'change'], function(event) {
var inputElm = helper.compileInput('<input type="checkbox" ng-model="checkbox" />');

expect(inputElm[0].checked).toBe(false);

$rootScope.$apply('checkbox = true');
expect(inputElm[0].checked).toBe(true);

$rootScope.$apply('checkbox = false');
expect(inputElm[0].checked).toBe(false);

if (event === 'change') inputElm[0].checked = true;
browserTrigger(inputElm[0], event);
expect($rootScope.checkbox).toBe(true);
});


it('should format booleans', function() {
var inputElm = helper.compileInput('<input type="checkbox" ng-model="name" />');

Expand Down
8 changes: 6 additions & 2 deletions test/ng/directive/ngRepeatSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,7 @@ describe('ngRepeat', function() {
});


it('should iterate over object with changing primitive property values', function() {
it('should iterate over object with changing primitive property values', inject(function($rootElement, $document) {
// test for issue #933

element = $compile(
Expand All @@ -365,6 +365,10 @@ describe('ngRepeat', function() {
'</li>' +
'</ul>')(scope);

// Append the app to the document so that "click" on a radio/checkbox triggers "change"
// Support: Chrome, Safari 8, 9
jqLite($document[0].body).append($rootElement.append(element));

scope.items = {misko: true, shyam: true, zhenbo:true};
scope.$digest();
expect(element.find('li').length).toEqual(3);
Expand Down Expand Up @@ -395,7 +399,7 @@ describe('ngRepeat', function() {
expect(element.find('input')[0].checked).toBe(false);
expect(element.find('input')[1].checked).toBe(true);
expect(element.find('input')[2].checked).toBe(true);
});
}));
});

describe('alias as', function() {
Expand Down