Amplify-js: Angular Material input not behaving as expected

[simonreitinger]

Describe the bug
I have an Angular 10 application. When I try to implement Amplify, <input matInput> is not behaving as expected anymore.

To Reproduce

1. npm install @aws-amplify/ui-angular aws-amplify
2. Configure Amplify (does not really matter for this problem)
3. Use this HTML file

<amplify-authenticator *ngIf="authState !== 'signedin'" username-alias="email"></amplify-authenticator>
<mat-form-field>
    <mat-label>Value</mat-label>
    <input matInput type="text" [(ngModel)]="value">
</mat-form-field>

1. The inputs are not reactive anymore and the placeholder is overlapping with the content.

Expected behavior
The placeholders should behave normally and animate just like the default Angular material inputs.

Screenshots
Actual:

Expected:

[jordanranz]

Hi @simonreitinger, do you have a sample repository we could use to reproduce this?

[simonreitinger]

Hey @jordanranz! I just created a dummy to reproduce it: https://github.com/simonreitinger/amplify-angular-dummy

[jordanranz]

@simonreitinger, I was able to reproduce with your sample repo, thank you for finding this.

I am not 100% sure what is causing this though. It seems that the Material UI component when rendered inside of the *ngIf block does not detect changes on the input inside of the material form field. I'll keep investigating the root cause.

[simonreitinger]

@jordanranz - Any updates on this?

[wlee221]

Sorry for the late response. I was able to repro this with angular 10 (thanks for the repro!) and angular 11.

Investigation
This happens even when *ngIf condition does not depend on authState and authData:

app.component.ts

export class AppComponent {
  isAuthenticated: boolean = false;
  // ...
  ngOnInit(): void {
    const authStateChangeHandler = (authState, authData) => {
      this.isAuthenticated = true;
      this.ref.detectChanges();
    };
    onAuthUIStateChange(authStateChangeHandler);
  }
}

app.component.html

<div *ngIf="isAuthenticated" class="App"> ... </div>

While isAuthenticated updates successfully and causes <div *ngIf ='isAuthenticated'> to render, matInput still fails to detect input / focus events. Because authStateChangeHandler body is called and updates ref as intended, I think this is a bug with @angular/material instead. It seems to have problem when it is conditionally rendered and component variable is updated by an external callback. I'll keep looking at this, but I am afraid there's not much we can do from Amplify side.

Workaround
Manually calling this.ref.detectChanges() fixes the behavior:

app.component.html

<input matInput type="text" (focus)="updateInput()" (input)="updateInput()" (blur)="updateInput()" [(ngModel)]="value" name="test">

app.component.ts

updateInput() {
  this.ref.detectChanges();
}

[wlee221]

Hi, I'll be closing this as workaround has been suggested and this is likely a bug with angular material.