diff --git a/src/components/select/demoBasicUsage/index.html b/src/components/select/demoBasicUsage/index.html index 77dd72292c9..8e4e5a589c4 100755 --- a/src/components/select/demoBasicUsage/index.html +++ b/src/components/select/demoBasicUsage/index.html @@ -1,6 +1,6 @@

A select can be used to select a single element from a list:

- + {{ opt }}

{{ neighborhood ? 'You selected ' + neighborhood : 'You haven\'t selected a neighborhood yet' }}

diff --git a/src/components/select/select-theme.scss b/src/components/select/select-theme.scss index a2850bcf116..412d2b21e64 100644 --- a/src/components/select/select-theme.scss +++ b/src/components/select/select-theme.scss @@ -1,5 +1,5 @@ md-select.md-THEME_NAME-theme { - &:focus { + &:not([disabled]):focus { .md-select-label { border-bottom-color: '{{primary-color}}'; color: '{{ foreground-1 }}'; @@ -14,9 +14,17 @@ md-select.md-THEME_NAME-theme { border-bottom-color: '{{warn-color}}'; } } + &[disabled] { + .md-select-label { + color: '{{foreground-3}}'; + &.md-placeholder { + color: '{{foreground-3}}'; + } + } + } .md-select-label { &.md-placeholder { - color: '{{foreground-3}}'; + color: '{{foreground-2}}'; } border-bottom-color: '{{foreground-4}}'; } diff --git a/src/components/select/select.js b/src/components/select/select.js index 91965b7c555..8f99a712741 100755 --- a/src/components/select/select.js +++ b/src/components/select/select.js @@ -121,9 +121,22 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming) { $mdTheming(element); return function postLink(scope, element, attr, ngModel) { - element.on('click', openSelect); + attr.$observe('disabled', function(disabled) { + if (disabled !== undefined) { + element.attr('tabindex', -1); + element.off('click', openSelect); + element.off('keydown', openOnKeypress); + } else { + element.attr('tabindex', 0); + element.on('click', openSelect); + element.on('keydown', openOnKeypress); + } + }); - element.on('keydown', openOnKeypress); + if (attr.disabled === undefined) { + element.on('click', openSelect); + element.on('keydown', openOnKeypress); + } element.attr({ 'role': 'combobox', diff --git a/src/components/select/select.scss b/src/components/select/select.scss index 18de16b330a..42c53d1949a 100755 --- a/src/components/select/select.scss +++ b/src/components/select/select.scss @@ -49,13 +49,18 @@ $select-max-visible-options: 5; md-select { display: inline-block; margin-top: 2.5 * $baseline-grid; - &:hover { - cursor: pointer + &[disabled]:hover { + cursor: default; } - &:focus { - .md-select-label { - border-bottom: 2px solid; - padding-bottom: $baseline-grid - 1; + &:not([disabled]) { + &:hover { + cursor: pointer + } + &:focus { + .md-select-label { + border-bottom: 2px solid; + padding-bottom: $baseline-grid - 1; + } } } } diff --git a/src/components/select/select.spec.js b/src/components/select/select.spec.js index 1f1354f6643..6939546b616 100755 --- a/src/components/select/select.spec.js +++ b/src/components/select/select.spec.js @@ -47,18 +47,22 @@ describe('', function() { } function openSelect(el) { - el.triggerHandler('click'); - waitForSelectOpen(); - inject(function($timeout) { - $timeout.flush(); - }); + try { + el.triggerHandler('click'); + waitForSelectOpen(); + inject(function($timeout) { + $timeout.flush(); + }); + } catch(e) { } } function waitForSelectOpen() { - inject(function($rootScope, $animate) { - $rootScope.$digest(); - $animate.triggerCallbacks(); - }); + try { + inject(function($rootScope, $animate) { + $rootScope.$digest(); + $animate.triggerCallbacks(); + }); + } catch(e) { } } function pressKey(el, code) { @@ -77,6 +81,13 @@ describe('', function() { }); } + it('supports disabled state', inject(function($document) { + var select = setupSelect('disabled="disabled", ng-model="val"'); + openSelect(select); + waitForSelectOpen(); + expect($document.find('md-select-menu').length).toBe(0); + })); + it('errors for duplicate md-options, non-dynamic value', inject(function($rootScope) { expect(function() { setup('ng-model="$root.model"', 'Hello' +