Inconsistent behavior with disabled and ng-disabled

[OlsonDev]

If I add the disabled attribute to md-switch, md-select, & md-slider the behavior is weird.

• md-switch looks enabled, can be focused (but doesn't change appearance), doesn't respond to spacebar or clicks
• md-select looks disabled, doesn't respond to clicks, can't be focused
• md-slider looks disabled, can be focused, responds to clicks, does not open its thumb

If I change disabled to ng-disabled="true":

• md-switch behaves the same (as if it had the disabled attribute)
• md-select behaves the same (as if it had the disabled attribute)
• md-slider no longer responds to clicks but can be focused

I wouldn't doubt if other controls exhibit poor behaviors but these are the ones I have in my app and have tested.

[bengadbois]

I see the same behavior with md-switch

[Masadow]

I'm not sure what does md-select behaves the same means for you (is it like disabled or is it like if there were nothing ?)

But for me, when I add ng-disabled="true" to md-select, then it does not respond to click and can't be focused, but it does not look like disabled.

[OlsonDev]

I edited the OP for clarity: md-select behaves the same (as if it had the disabled attribute)

That is, it looks disabled, doesn't respond to clicks, can't be focused. I just double-checked this with the latest update (angular 1.4.3, angular/material 0.10.1). Odd that we're getting different behavior.

[bengadbois]

I just noticed if you add the "md-primary" class to md-switch, it'll override the disabled grayed out appearance, so it'll look enabled, but acts disabled (ie the first bullet point in the OP).

[Masadow]

@OlsonDev I was using 0.10.1-rc5, just upgraded to 0.10.1 and still get the same behaviour.

What is looking disabled for you ? Can you provide a screenshot ?

In the provided example, only the last two fields are disabled for me, it works as expected aside from the design that looks like other enabled fields.

According to disabled inputs, I guess there should be a dotted border at the bottom of the select ?

[OlsonDev]

Enabled, ng-disabled="true", disabled="disabled":

<md-select flex="10" class="md-primary" ng-model="options.selectedDisplayNumber" aria-label="Display number">
    <md-option ng-repeat="displayNumber in availableDisplayNumbers" ng-value="{{options.displayNumber}}">{{displayNumber}}</md-option>
</md-select>
...
<md-select flex="10" class="md-primary" ng-model="options.selectedDisplayNumber" aria-label="Display number" ng-disabled="true">
    <md-option ng-repeat="displayNumber in availableDisplayNumbers" ng-value="{{options.displayNumber}}">{{displayNumber}}</md-option>
</md-select>
...
<md-select flex="10" class="md-primary" ng-model="options.selectedDisplayNumber" aria-label="Display number" disabled="disabled">
    <md-option ng-repeat="displayNumber in availableDisplayNumbers" ng-value="{{options.displayNumber}}">{{displayNumber}}</md-option>
</md-select>

No focus, focus 1st <md-select>, activate 1st <md-select> (cannot focus/activate 2nd/3rd):

[Masadow]

Oh, then there's an issue when using placeholder on top of that. In my examples, I'm using placeholder.

Just try to add a placeholder in a fourth column and you'll see that he looks like the disabled input

<md-select flex="10" class="md-primary" ng-model="options.selectedDisplayNumber" aria-label="Display number" placeholder="Number">
    <md-option ng-repeat="displayNumber in availableDisplayNumbers" ng-value="{{options.displayNumber}}">{{displayNumber}}</md-option>
</md-select>

[OlsonDev]

placeholder="Number" did nothing.

Do you mean something like this?

<md-input-container>
    <label>Number</label>
    <md-select flex="10" class="md-primary" ng-model="options.selectedDisplayNumber" aria-label="Display number">
        <md-option ng-repeat="displayNumber in availableDisplayNumbers" ng-value="{{options.displayNumber}}">{{displayNumber}}</md-option>
    </md-select>
 </md-input-container>

[Masadow]

Oh it changed again, your syntax is right. This is weird that placeholders are working for me then