fix(select): disabled option no longer reacting to hover and closing on click

Check disabled attribute before closing menu. When clicking the menu anywhere but a valid option the menu closing will be prevented

fixes #4967. Closes #5619.

Author: EladBezalel

src/components/select/select-theme.scss

@@ -64,7 +64,7 @@ md-select-menu.md-THEME_NAME-theme {
       }
     }
   }
-  md-option:focus:not([selected]) {
+  md-option:focus:not([disabled]):not([selected]) {
     background: '{{background-200}}';
   }
 

src/components/select/select.js

@@ -1202,14 +1202,16 @@ function SelectProvider($$interimElementProvider) {
           if (ev && ( ev.type == 'mouseup') && (ev.currentTarget != dropDown[0])) return;
           if ( mouseOnScrollbar() ) return;
 
-          if (!selectCtrl.isMultiple) {
-            opts.restoreFocus = true;
+          var option = $mdUtil.getClosest(ev.target, 'md-option');
+          if (option && option.hasAttribute && !option.hasAttribute('disabled')) {
+            if (!selectCtrl.isMultiple) {
+              opts.restoreFocus = true;
 
-            $mdUtil.nextTick(function() {
-              $mdSelect.hide(selectCtrl.ngModel.$viewValue);
-            }, true);
+              $mdUtil.nextTick(function () {
+                $mdSelect.hide(selectCtrl.ngModel.$viewValue);
+              }, true);
+            }
           }
-
           /**
            * check if the mouseup event was on a scrollbar
            */

src/components/select/select.spec.js

@@ -843,7 +843,7 @@ describe('<md-select>', function() {
       if (angular.isArray(options)) {
         $rootScope.$$values = options;
         var renderValueAs = compileOpts ? compileOpts.renderValueAs || 'value' : 'value';
-        optionsTpl = '<md-option ng-repeat="value in $$values" ng-value="value">{{' + renderValueAs + '}}</md-option>';
+        optionsTpl = '<md-option ng-repeat="value in $$values" ng-value="value"><div class="md-text">{{' + renderValueAs + '}}</div></md-option>';
       } else if (angular.isString(options)) {
         optionsTpl = options;
       }
@@ -898,7 +898,7 @@ describe('<md-select>', function() {
   function clickOption(index) {
     inject(function($rootScope, $document) {
       var openMenu = $document.find('md-select-menu');
-      var opt = $document.find('md-option')[index];
+      var opt = angular.element($document.find('md-option')[index]).find('div')[0];
 
       if (!openMenu.length) throw Error('No select menu currently open');
       if (!opt) throw Error('Could not find option at index: ' + index);
@@ -909,6 +909,7 @@ describe('<md-select>', function() {
       });
       angular.element(openMenu).triggerHandler({
         type: 'mouseup',
+        target: target,
         currentTarget: openMenu[0]
       });
     });