bug(input): Not correctly working as an Angular Element

[jimkeecn]

Reproduction

I have create a github repo for this performance issue from angular material, here is the link https://github.com/jimkeecn/buildxactDemo

the problem in the repo is. I have created an angular element with a mat-input. after building the angular element and used in other project. the mat-input is buggy, the placeholder will not move up while the input is focus and filled.

Steps to reproduce:

1. download the repo.
2. open the index.html in folder /I am outside of the project/
3. you will see the performance of the angular material input and table.
4. the component is actually in library project folder /search-page
5. angular element is in external project folder /app-component

Expected Behavior

I was expecting to see the mat-input will run smooth like it running without building as angular elements.

Actual Behavior

mat-input
placeholder is not lifted up after the field is focus or filled.

Environment

• Angular: ~9.0.3
• Angular/elements: ^9.0.4
• CDK/Material: ^9.1.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[jimkeecn]

@Splaktar this is the issue I mentioned.

[lucaboy]

I'm facing the same issues (Angular: 9.0.6 + CDK/Material: 9.1.2).

[Splaktar]

Updated the title. If you also have an issue with MatTable in an Angular Element, a separate issue would be appreciated. We don't want to get multiple issues lost in a single report.

[jimkeecn]

any update on this one??

[Splaktar]

@jimkeecn no, sorry. It hasn't been triaged yet, so I'm not sure what priority it will have.

[jimkeecn]

@Splaktar No problem