Nesting ng-content down to multiselect

[klemenoslaj]

Bug, feature request, or proposal:

Feature request / Proposal

What is the expected behavior?

Nested ng-content containing mat-option should properly appear in mat-autocomplete

What is the current behavior?

Content projection works fine, content is rendered and accessible via developer tools, but it doesn't get shown on input focus (visibility remains hidden).
When we manually add visibility: visible (while debugging) menu indeed appears, but click on mat-option has no effect.
Seems like mat-autocomplete fails to recognize it.

What are the steps to reproduce?

A very basic example of content projection nesting and reproduction steps available:
https://stackblitz.com/edit/angular-3ldpsb?file=app%2Fapp.component.html

What is the use-case or motivation for changing an existing behavior?

We should be able to wrap mat-autocomplete component in order to avoid code duplication. That component would then implement MatFormFieldControl, but this is the first issue to tackle.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 6.1.2
Node: 8.11.3
OS: darwin x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.2
@angular-devkit/build-angular      0.7.2
@angular-devkit/build-ng-packagr   0.7.2
@angular-devkit/build-optimizer    0.7.2
@angular-devkit/build-webpack      0.7.2
@angular-devkit/core               0.7.2
@angular-devkit/schematics         0.7.2
@angular/cdk                       6.4.2
@angular/cli                       6.1.2
@angular/material                  6.4.2
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.1.2
@schematics/angular                0.7.2
@schematics/update                 0.7.2
ng-packagr                         3.0.6
rxjs                               6.2.2
typescript                         2.9.2
webpack                            4.9.2

[josephperrott]

Closing as this is actually something that is a limitation at the platform level of Angular itself.

This is not possible because you cannot forward the ng-content you project in further into the MatAutocomplete template. Because MatAutocomplete finds its options as via ContentChildren, the options will not be discovered by the query. The reason that you see the visibility fail to change from hidden to visible is because the showPanel never changes on the autocomplete instance because there is no length to the options list (relevant autocomplete code).

You can see this issue (and this comment specifically) for more information.

[klemenoslaj]

Hi @josephperrott, thanks for a really quick reply and clarification, that indeed is a limitation of platform, unfortunately.

So at the end we are left with a very limited possibilities when we want to avoid code duplication.
We still can of course wrap a component and introduce custom inputs, but that kinda destroys the simplicity of material2.

Do we have any other possibilities?

[klemenoslaj]

A great explanation of the problem: angular/angular#20810 (comment)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}