bug(mat-autocomplete): Using ngFor in matTab in combination with Shadowdom breaks mat-autocomplete

[marksuurland]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-ivy-y21fh9

Steps to reproduce:

1. Set encapsulation to ViewEncapsulation.ShadowDom of a component, in this case the root component, app.component.
2. Create a mat-tab-group in the html of the component.
3. Create property which contains the tabs, use a json like structure with several tabs, each tab containing a name and its options.
4. Use ngFor to create several mat-tabs, use the tab name dynamically to set the label of the tab.
5. Create an autocomplete component use the tab.options to set the options of the mat-autocomplete.
6. Click on the autocomplete inside 1 of the tabs

Expected Behavior

What behavior were you expecting to see?
Mat autocomplete, opens its options dropdown.

Actual Behavior

What behavior did you actually see?
Mat autocomplete is closed immediately on click

Environment

• Angular: 9.1.4
• CDK/Material: 9.2.2 / 9.2.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[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.}