Material: autocomplete: input element should use the same theme

[mckenzielong]

Actual Behavior:

• What is the issue? * Classes like md-accent (for floating label autocompletes) are not passed along to the input container. There is a similar feature for passing classes to the menu container: md-menu-class. This would allow the use theming engine with the existing inputs (as well as additional styles for the input.) For me, the big draw here is the theming support.
• What is the expected behavior? Add an option like md-input-class that allows us to forward classes to the md-input-container.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/mckenzielong/pen/vKorwJ
• Details: Note: mdAccent isn't applied, and the custom (and ugly) class isn't used on the mdAutocomplete input (as expected)

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.0

Additional Information:

• Browser Type: * N/A
• Browser Version: * N/A
• OS: * N/A
• Stack Traces: N/A

Ping @DevVersion (as per #3623)

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[devversion]

At first glance I think it would be a more straightforward API if we just do something like

<md-autocomplete class="md-accent" />

So it works as same as other components do and provides good consistency.

[devversion]

So after looking at it at the source - I think it's definitely a more straightforward API with just applying the classes on the autocomplete element.

But unfortunately this requires us to have an extra watcher, and manually filter out for the supported classes.

We might end up, providing the md-input-class attribute, but in this case developers will assume that the input will receive the classes, and not the container.

Any good ideas?

[mckenzielong]

@DevVersion
I have ideas (disclaimer: mostly not good idea, but ideas.) -- I still do like having the md-input-class attribute.
1) the easy way - register autocomplete with mdTheming and adjust input-theme.scss to include a rule like md-autocomplete.md-THEME_NAME-theme > md-input-container

• would muddy scope of input-theme.scss, which wouldn't be pretty
• probably the easiest work around

2) abstract input-theme.scss' guts into another scss file which is then imported into the input-theme and autocomplete-theme files

• equally easy as idea 1, arguably just as ugly

3) add an md-input-container-theme attribute which is clearly documented to just do theming on the container.

• complicates the already lengthy api of md-autocomplete
• might be other cases in the project where an attribute like that could be used (can't think of one off of the top of my head thought)

4) allow user to specify their own input-container (like transclusion, or at least similarly to how the current implementation handles the result template)

• lots of work for such a small thing

5) filter the classes as you mentioned and forward those to the container

• same idea could be used in md-input-container itself to solve the theming problems with md-select
• maybe could implement as a directive md-forward-palette? that forwards classes to children that are registered with theming?

[devversion]

@mckenzielong Thanks for the great ideas! I would go with 1) for now, because I consider this as the easiest one, and does not require big changes in the autocomplete.

Let me know if you want to submit a PR for that :) - Otherwise I can do it.

[mckenzielong]

@DevVersion might have time tomorrow to do one up.

[Splaktar]

Well we do have an md-input-class API for autocomplete now, but that doesn't help here since it applies the classes to the input and not the md-input-container.

To solve this with the dropdown, we have a md-menu-container-class API in addition to the md-menu-class API.

That said, I agree that the fix in https://github.com/angular/material/pull/9698 is a lot more convenient and matches what developers would expect.