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

fix(select): ensure the label attribute is updated in Internet Explorer #10042

Closed
wants to merge 2 commits into from
Closed

fix(select): ensure the label attribute is updated in Internet Explorer #10042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c4c59a
test(select): refactor option elements expectations to use `toEqualOp…
petebacondarwin Nov 13, 2014
640cd1b
fix(select): ensure the label attribute is updated in Internet Explorer
petebacondarwin Nov 13, 2014
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
2 changes: 2 additions & 0 deletions src/ng/directive/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -623,6 +623,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) {
updateLabelMap(labelMap, existingOption.label, false);
updateLabelMap(labelMap, option.label, true);
lastElement.text(existingOption.label = option.label);
lastElement.prop('label', existingOption.label);
}
if (existingOption.id !== option.id) {
lastElement.val(existingOption.id = option.id);
Expand Down Expand Up @@ -652,6 +653,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) {
.val(option.id)
.prop('selected', option.selected)
.attr('selected', option.selected)
.prop('label', option.label)
.text(option.label);
}

Expand Down
95 changes: 66 additions & 29 deletions test/ng/directive/selectSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,28 @@ describe('select', function() {
};

return equals(expectedValues, actualValues);
},

toEqualOption: function(value, text, label) {
var errors = [];
if (this.actual.attr('value') !== value) {
errors.push('Expected option value "' + this.actual.attr('value') + '" to equal "' + value + '"');
}
if (text && this.actual.text() !== text) {
errors.push('Expected option value "' + this.actual.attr('value') + '" to equal "' + value + '"');
}
if (label && this.actual.attr('label') !== label) {
errors.push('Expected option value "' + this.actual.attr('value') + '" to equal "' + value + '"');
}

this.message = function() {
return errors.join('\n');
};

return errors.length === 0;
}
});

});


Expand Down Expand Up @@ -756,9 +776,9 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(3);
expect(sortedHtml(options[0])).toEqual('<option value="?"></option>');
expect(sortedHtml(options[1])).toEqual('<option value="10">ten</option>');
expect(sortedHtml(options[2])).toEqual('<option value="20">twenty</option>');
expect(options.eq(0)).toEqualOption('?', '');
expect(options.eq(1)).toEqualOption('10', 'ten');
expect(options.eq(2)).toEqualOption('20', 'twenty');
});

it('should preserve value even when reference has changed (single&array)', function() {
Expand Down Expand Up @@ -1047,9 +1067,9 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(3);
expect(sortedHtml(options[0])).toEqual('<option value="0">A</option>');
expect(sortedHtml(options[1])).toEqual('<option value="1">B</option>');
expect(sortedHtml(options[2])).toEqual('<option value="2">C</option>');
expect(options.eq(0)).toEqualOption('0', 'A');
expect(options.eq(1)).toEqualOption('1', 'B');
expect(options.eq(2)).toEqualOption('2', 'C');
});

it('should render zero as a valid display value', function() {
Expand All @@ -1062,9 +1082,9 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(3);
expect(sortedHtml(options[0])).toEqual('<option value="0">0</option>');
expect(sortedHtml(options[1])).toEqual('<option value="1">1</option>');
expect(sortedHtml(options[2])).toEqual('<option value="2">2</option>');
expect(options.eq(0)).toEqualOption('0', '0');
expect(options.eq(1)).toEqualOption('1', '1');
expect(options.eq(2)).toEqualOption('2', '2');
});


Expand All @@ -1081,9 +1101,9 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(3);
expect(sortedHtml(options[0])).toEqual('<option value="blue">blue</option>');
expect(sortedHtml(options[1])).toEqual('<option value="green">green</option>');
expect(sortedHtml(options[2])).toEqual('<option value="red">red</option>');
expect(options.eq(0)).toEqualOption('blue', 'blue');
expect(options.eq(1)).toEqualOption('green', 'green');
expect(options.eq(2)).toEqualOption('red', 'red');
expect(options[2].selected).toEqual(true);

scope.$apply(function() {
Expand All @@ -1103,23 +1123,23 @@ describe('select', function() {
});

expect(element.find('option').length).toEqual(1); // because we add special empty option
expect(sortedHtml(element.find('option')[0])).toEqual('<option value="?"></option>');
expect(element.find('option')).toEqualOption('?','');

scope.$apply(function() {
scope.values.push({name:'A'});
scope.selected = scope.values[0];
});

expect(element.find('option').length).toEqual(1);
expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>');
expect(element.find('option')).toEqualOption('0', 'A');

scope.$apply(function() {
scope.values.push({name:'B'});
});

expect(element.find('option').length).toEqual(2);
expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>');
expect(sortedHtml(element.find('option')[1])).toEqual('<option value="1">B</option>');
expect(element.find('option').eq(0)).toEqualOption('0', 'A');
expect(element.find('option').eq(1)).toEqualOption('1', 'B');
});


Expand All @@ -1138,15 +1158,15 @@ describe('select', function() {
});

expect(element.find('option').length).toEqual(2);
expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>');
expect(sortedHtml(element.find('option')[1])).toEqual('<option value="1">B</option>');
expect(element.find('option').eq(0)).toEqualOption('0', 'A');
expect(element.find('option').eq(1)).toEqualOption('1', 'B');

scope.$apply(function() {
scope.values.pop();
});

expect(element.find('option').length).toEqual(1);
expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>');
expect(element.find('option')).toEqualOption('0', 'A');

scope.$apply(function() {
scope.values.pop();
Expand Down Expand Up @@ -1198,9 +1218,9 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(3);
expect(sortedHtml(options[0])).toEqual('<option value="0">B</option>');
expect(sortedHtml(options[1])).toEqual('<option value="1">C</option>');
expect(sortedHtml(options[2])).toEqual('<option value="2">D</option>');
expect(options.eq(0)).toEqualOption('0', 'B');
expect(options.eq(1)).toEqualOption('1', 'C');
expect(options.eq(2)).toEqualOption('2', 'D');
});


Expand Down Expand Up @@ -1244,7 +1264,7 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(1);
expect(sortedHtml(options[0])).toEqual('<option value="regularProperty">visible</option>');
expect(options.eq(0)).toEqualOption('regularProperty', 'visible');
});

it('should allow expressions over multiple lines', function() {
Expand All @@ -1268,8 +1288,8 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(3);
expect(sortedHtml(options[1])).toEqual('<option value="0">2</option>');
expect(sortedHtml(options[2])).toEqual('<option value="1">3</option>');
expect(options.eq(1)).toEqualOption('0', '2');
expect(options.eq(2)).toEqualOption('1', '3');
});

it('should not update selected property of an option element on digest with no change event',
Expand Down Expand Up @@ -1300,6 +1320,23 @@ describe('select', function() {
expect(scope.selected).toBe(scope.values[0]);
});

// bug fix #9621
it('should update the label property', function() {
// ng-options="value.name for value in values"
// ng-model="selected"
createSingleSelect();

scope.$apply(function() {
scope.values = [{name: 'A'}, {name: 'B'}, {name: 'C'}];
scope.selected = scope.values[0];
});

var options = element.find('option');
expect(options.eq(0).prop('label')).toEqual('A');
expect(options.eq(1).prop('label')).toEqual('B');
expect(options.eq(2).prop('label')).toEqual('C');
});

describe('binding', function() {

it('should bind to scope value', function() {
Expand Down Expand Up @@ -1426,8 +1463,8 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(2);
expect(sortedHtml(options[0])).toEqual('<option value="0">C</option>');
expect(sortedHtml(options[1])).toEqual('<option value="1">B</option>');
expect(options.eq(0)).toEqualOption('0', 'C');
expect(options.eq(1)).toEqualOption('1', 'B');
});


Expand All @@ -1447,8 +1484,8 @@ describe('select', function() {

var options = element.find('option');
expect(options.length).toEqual(2);
expect(sortedHtml(options[0])).toEqual('<option value="a">C</option>');
expect(sortedHtml(options[1])).toEqual('<option value="b">B</option>');
expect(options.eq(0)).toEqualOption('a', 'C');
expect(options.eq(1)).toEqualOption('b', 'B');
});


Expand Down