select: temporary duplicate options cause duplicate labels

[daniel-nagy]

Actual Behavior:

• What is the issue? *

When options are subject to change, either by a ngIf directive or ngRepeat directive, It is possible for the selected label text to show duplicates even when only one item is selected.

In my situation, I am using ngRepeat to display options. I am using the mdOnOpen method to fetch options from the server when the menu is opened. If there is already a value for the model I push it onto the options list before the menu is opened so it displays as selected. When the results come back from the server I replace the current options list with the result. The problem is, with animations enabled, the old options are not removed before the new options are added. Because of this,

var selectedOptionEls = $mdUtil.nodesToArray($element[0].querySelectorAll('md-option[selected]'));

will return duplicates and two labels for the same option will be shown. My current workaround is to disable animations for the mdSelectMenu component.

angular.module('foo').directive('mdSelectMenu', ($animate) => ({
  link(scope, element) {
    $animate.enabled(element, false);
  },
  restrict: 'E'
}));

• What is the expected behavior?

I believe the mdSelect component should be a little smarter and filter duplicates or at least elements being prepared for removal.

CodePen (or steps to reproduce the issue): *

With Angular animations enabled,

class SelectController {
  options = [];

  constructor($timeout) {
    Object.assign(this, {$timeout});
  }

  $onInit() {
    if (this.selected) {
      this.options.push(this.selected);
    }
  }

  menuWillOpen() {
    return this.$timeout(() => {
      this.options = [
        // new options such that one has the same id as the item selected
      ];
    }), 5000);
  }
}

<md-select aria-label="Select" md-on-open="$ctrl.menuWillOpen()" ng-model="$ctrl.selected" ng-model-options="{trackBy: '$value.id'}">

  <md-option ng-value="option" ng-repeat="option in $ctrl.options">
    {{::option.label}}
  </md-option>

</div>

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.1.1