Amplify-js: Manually pasting email to username throws error 'Username cannot be empty'

[4-life]

Describe the bug
Manually pasting email to username input throws error 'Username cannot be empty'. This bug only on real mobile device on Android. Login form in ionic 4 app.

To Reproduce
Steps to reproduce the behavior:

1. Create ionic 4 app with amlify auth component
   <amplify-authenticator framework="Ionic"></amplify-authenticator>
2. Run app on real mobile device (emulator doesn't reproducing the bug)
3. Copy and paste username to login input
4. Write password
5. Click on Sign in
6. See error

Expected behavior
User Signed In

Screenshots

Desktop (please complete the following information):
Error only on mobile device

Smartphone (please complete the following information):

• Device: Nokia 7, Xiaomi Mi MAX
• OS: Android 7, Android 8
• ionic 4 mobile app

[l3wy]

Added this work-around to another issue #2537

---

I struggled with this for WAY too long using Ionic/Angular ... Sharing my final solution ...

@Directive({selector: '[AuthFix]'})
export class AuthFix {

    keyupEvent: KeyboardEvent = new KeyboardEvent("keyup");
    paste: boolean = false;

    @HostListener('paste') onPaste() {
        this.paste = true;
    }

    @HostListener('input', ['$event.target']) onInput(target: any) {
        if (this.paste) {
            target.parentElement.dispatchEvent(this.keyupEvent);
            this.paste = false;
        }
    }
}

I put AuthFix in my amplify-authenticator tag like so ....

<amplify-authenticator [signUpConfig]="signUpConfig" [usernameAttributes]="usernameAttributes" framework="ionic" AuthFix></amplify-authenticator>

[piotr-zielinski-lab]

I just ran into the same problem, initially reported by a mobile user, but I was able to reproduce it on a desktop as well. I'm also using core not Ionic version of the component.
l3wy AuthFix solved the problem for me, with one exception, I had to use:
target.dispatchEvent(this.keyupEvent);
instead of
target.parentElement.dispatchEvent(this.keyupEvent);