Material: mdInputContainer: theme classes not applied to mdSelect

[mckenzielong]

Actual Behavior:

• What is the issue? * mdSelect inside an md-input-container does not respect theming classes (md-accent for example)
• What is the expected behavior? mdSelect will behave like input, mdDatepicker and textarea inside an input container and use the theme class set on the input container.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/mckenzielong/pen/mAVXLJ
• Details:
  
  
  
  • tab through the inputs. First input is accent, first select has accent placed on the container, second input has accent placed on the select element.
  
  
  • note that the first select does not respect the theming class
  
  

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome/ Opera
• Browser Version: * 53/39
• OS: * Windows 7
• Stack Traces: N/A

[mikila85]

+1

[Splaktar]

I updated the CodePen to 1.1.10 and still see this issue. I also reproduced this issue in the Validations demo for select.

@rudzikdawid do you think that you can look at this one please?

[rudzikdawid]

@Splaktar in your CodePen example there is no md-theme directive inside view or any $mdThemingProvider inside controller, i think that is why theme classes not applied to mdSelect.

Look at https://codepen.io/anon/pen/XBmJjZ?editors=1010 here with md-theme theme classes are applied to mdSelect

[Splaktar]

Right, but the default theme (indigo primary and pink accent) should still work properly. I added that in another CodePen but it didn't make a difference.

The ink isn't taking the accent color here but the label is.

Also when I don't select an option, I get the label with a primary color instead of the accent.

[rudzikdawid]

You have right, problem exist, now i see.

inside rendered DOM md-input-container.md-accent element we have label element witch have accent color rgb(255,64,129) so theme engine affect on label element

<label for="select_5" class="md-placeholder">Favorite Color</label>

but... what we see as label of md-select is not that label element.
Blue label comes from element:

<md-select-value>
   <span>Favorite Color</span>
   ...
</md-select-value>

and yes that element has color: rgb(63,81,181) and md-accent class from md-input-container doesn't affect on that color.

with this scss rules inside select-theme.scss should be better:

md-input-container.md-THEME_NAME-theme {
  &:not(.md-input-invalid) {
    &.md-input-focused {
      &.md-accent {
        .md-select-value {
          border-color: '{{accent-color}}';
          span {
            color: '{{accent-color}}';
          }
        }
      }
      &.md-warn {
        .md-select-value {
          border-color: '{{warn-A700}}';
          span {
            color: '{{warn-A700}}';
          }
        }
      }
    }
  }
}

PR https://github.com/angular/material/pull/11373