fix(ngOptions): always set the 'selected' attribute for selected options

Narretz · Narretz · commit 2c54a3c0811c · 2016-02-28T16:12:38.000+01:00
We don't set selected property / attribute on options that are already selected. That happens for example if the browser has automatically selected the first option in a select. In that case, the selected property is set automatically, but the selected attribute is not. This doesn't impact the functionality of the select, but it can be problematic if option elements are selected with `option[selected]` in tests. Closes angular#14115 Closes angular#14125
diff --git a/src/ng/directive/ngOptions.js b/src/ng/directive/ngOptions.js
@@ -468,14 +468,20 @@ var ngOptionsDirective = ['$compile', '$parse', function($compile, $parse) {
           var option = options.getOptionFromViewValue(value);
 
           if (option && !option.disabled) {
+            // Don't update the option when it is already selected.
+            // For example, the browser will select the first option by default. In that case,
+            // most properties are set automatically - except the `selected` attribute, which we
+            // set always
+
             if (selectElement[0].value !== option.selectValue) {
               removeUnknownOption();
               removeEmptyOption();
 
               selectElement[0].value = option.selectValue;
               option.element.selected = true;
-              option.element.setAttribute('selected', 'selected');
             }
+
+            option.element.setAttribute('selected', 'selected');
           } else {
             if (value === null || providedEmptyOption) {
               removeUnknownOption();
diff --git a/test/ng/directive/ngOptionsSpec.js b/test/ng/directive/ngOptionsSpec.js
@@ -298,6 +298,40 @@ describe('ngOptions', function() {
 
   });
 
+  it('should set the "selected" attribute and property on selected options', function() {
+    scope.values = [{
+      id: 'FF0000',
+      display: 'red'
+    }, {
+      id: '0000FF',
+      display: 'blue'
+    }];
+    scope.selected = 'FF0000';
+
+    createSelect({
+      'ng-model': 'selected',
+      'ng-options': 'option.id as option.display for option in values'
+    });
+    scope.$digest();
+
+    var options = element.find('option');
+    expect(options.length).toEqual(2);
+    expect(options.eq(0)).toEqualOption('FF0000', 'red');
+    expect(options.eq(1)).toEqualOption('0000FF', 'blue');
+
+    expect(options.eq(0)[0].getAttribute('selected')).toBe('selected');
+    expect(options.eq(0).attr('selected')).toBe('selected');
+    expect(options.eq(0)[0].selected).toBe(true);
+    expect(options.eq(0).prop('selected')).toBe(true);
+
+    scope.selected = '0000FF';
+    scope.$digest();
+
+    expect(options.eq(1)[0].getAttribute('selected')).toBe('selected');
+    expect(options.eq(1).attr('selected')).toBe('selected');
+    expect(options.eq(1)[0].selected).toBe(true);
+    expect(options.eq(1).prop('selected')).toBe(true);
+  });
 
   it('should render zero as a valid display value', function() {
     createSingleSelect();
