angular / angular/components

bug(mat-select): mat-options not showing up on dynamically generated component

オープン
#26,803 コメント 10 件 リアクション 0 件 担当者 1 名 @andrewseguin が担当を希望しています GitHub で見る
area: material/select area: theming P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Hi, this is my first issue, so I hope everything is corrent.

I'm currently implementing some map popups (using leaflet, but I assume the issue would also appear for other map providers) in my app, using dynamically generated components as their content. Within that components, I have a mat-select, which is not displaying any options, as the title mentioned. When I click on it, the select field itself is focused and gets the correct classes, but the options overlay is not appearing.

My guess is, that something is wrong with the handling of the overlay in combination with dynamically generated components. When checking the DOM, I could see that the overlay container was not added to the body. Outside of the dynamic component the exact same mat-select works as expected. I also tried to create a dialog within my dynamic component and it also works fine (overlay container is attached to the body).

Every other functionality within the component is working as well (root services, ngrx store, ...).

There are no console errors.

Module imports contain MatSelectModule, MatInputModule & MatFormFieldModule.

Is this a bug or am I just missing something?

### Reproduction

1. add mat-select to popupComponent:
```


{{ status.id }}

```

2. Generate Component with createComponent(), using a generic EnvironmentInjector:

`const popupComponent: ComponentRef = createComponent(PopupComponent, {
environmentInjector: this._environmentInjector
});`

3. Add data to the component and execute change detection:

`component.instance.statuses = statuses;
component.changeDetectorRef.detectChanges();`

4. bind content to map popup (might be a possible source for the bug as well):

`mapMarker.bindPopup(popupComponent.location.nativeElement as Content);`

5. when opening the popup on the map and clicking on the select, the highlighting is correct, but nothing else happens:

![grafik](https://user-images.githubusercontent.com/125544629/225877898-4a2c8117-ce56-41ac-9fc0-37570d2e91da.png)

### Expected Behavior

mat-options should show up

### Actual Behavior

mat-options notshowing up, overlay container not attached

### Environment

- Angular: 15.0.2
- CDK/Material: 15.1.4
- Browser(s): Firefox 102.8

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。