Material: select(select-header): md-input-container throws errors with multiple input elements

[wosevision]

Actual Behavior:

• What is the issue? *
<md-input-container> throws error when more than one input is used inside it (expected behaviour, but –..) md-select's feature to contain another input as an md-select-header is rendered broken/inconsistent. Setups like the select-header in this example from the docs feature an input as the select header, which seems to work, but the header will not accept any of the md- inputs.
• What is the expected behavior?
  To either reject all secondary inputs (for consistency's sake), or more preferably, to accept all secondary inputs when the component merits it (such as in the <md-select-header>.
  Pre-1.1.3, I was able to place an <md-checkbox> inside the header with only minor layout compensations to be made. Post-1.1.3, the same setup throws an error.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  http://codepen.io/wosevision/pen/VPQXPy
• Details:
  Shows <md-select> with with setup described above, with pre-1.1.3 version. Includes link to 1.1.3 version for switching script src with; change script and select no longer works because of an error now thrown by ng-material.

Angular Versions: *

• Angular Version:
  1.5.8
• Angular Material Version:
  1.1.3

Additional Information:

• Browser Type: *
  All
• Browser Version: *
  All
• OS: *
  All
• Stack Traces:

Error: <md-input-container> can only have *one* child <input>, <textarea> or <select> element!
    at rawgit.com/angular/bower-material/master/angular-material.min.js:11

[peio72]

+1

[dariusjb]

+1

[dariusjb]

I am trying to make use of md-chips with md-autocomplete (similar to the md-contact-chips) and the input generated by md-autocomplete with the other nodes, are triggering the error, not consistently though. But as soon as I switch from a not readonly to readonly mode and vice versa.

Having the md-input-container wrapping all, allows this component to be part of my form and trigger and display validation logic.

[GordonDrop]

+1

[npbenjohnson]

Regarding the example multiselect with search, it can also result in confusing label logic on the select box.

1. md-no-float on the input container
2. no label inside the input container (using aria-labelledby instead)
3. Placeholder present on both md-select and the search box

It floats the placeholder label anyway (not sure if that is by design), and there is some confusing pattern where it sometimes floats the search, and sometimes the select, placeholder.
Also that example's search isn't accessible so it breaks from the stated goals of angular-material.

[npbenjohnson]

Workaround (kind of):
Nest another md-input-container in the select header. It fixes the behavior issues because the issues are caused by controller inheritance. The styles (on the textbox, I didn't test other types) have margins and extra space for errors, so it's not a great workaround.

It would be nice to have an actual solution for this, potentially md-search (element), or md-ignore (attribute), to allow for creating search inputs without all of the extra logic of an input container.

As far as mixing in autocomplete goes, at least for multi-select, it is an accessibility nightmare.

[Splaktar]

CodePen that shows how wrapping the md-checkbox in an md-input-container solves this issue (yes some extra styling is needed to make it look nice).

I've opened https://github.com/angular/material/issues/11139 to track the md-select-header demo not being accessible.

I'm going to close this for now as a workaround is known. If you want to request a more formal way for defining a search in a select (as mentioned above), please file a feature request for that.