kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-08 22:37:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): ensure that at least one option has the selected attribute set

Browse Source 
Using `prop` to set selected is correct programmatically but accessibility
guidelines suggest that at least on item should have the `selected` attribute
set.

Closes #8366
Closes #8429
This commit is contained in:
Peter Bacon Darwin
2014-07-31 09:31:14 +01:00
parent dd2a803f4f
commit 25a476ea09
2 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/ng/directive/select.js
View File

@@ -576,6 +576,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) {
(element = optionTemplate.clone())
.val(option.id)
.prop('selected', option.selected)
.attr('selected', option.selected)
.text(option.label);
}

41
test/ng/directive/selectSpec.js
View File

@@ -1008,6 +1008,47 @@ describe('select', function() {
expect(scope.selected).toBe(scope.values[1]);
});
it('should ensure that at least one option element has the "selected" attribute', function() {
createSelect({
'ng-model': 'selected',
'ng-options': 'item.id as item.name for item in values'
});
scope.$apply(function() {
scope.values = [{id: 10, name: 'A'}, {id: 20, name: 'B'}];
});
expect(element.val()).toEqual('?');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
scope.$apply(function() {
scope.selected = 10;
});
// Here the ? option should disappear and the first real option should have selected attribute
expect(element.val()).toEqual('0');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
// Here the selected value is changed but we don't change the selected attribute
scope.$apply(function() {
scope.selected = 20;
});
expect(element.val()).toEqual('1');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
scope.$apply(function() {
scope.values.push({id: 30, name: 'C'});
});
expect(element.val()).toEqual('1');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
// Here the ? option should reappear and have selected attribute
scope.$apply(function() {
scope.selected = undefined;
});
expect(element.val()).toEqual('?');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
});
});