From 920ec05fbbe9391a4515a988fd96fe5f35ef8392 Mon Sep 17 00:00:00 2001
From: Yuan Chao <chaoo.yuan@gmail.com>
Date: Mon, 29 Nov 2021 05:30:32 +0800
Subject: [PATCH] Fix cursor location changing issue on toggle password (#561)

---
 .DS_Store                                 | Bin 0 -> 8196 bytes
 angular/src/components/lock.component.ts  |  12 +++++++++---
 angular/src/components/login.component.ts |  11 +++++++++--
 3 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..81c71ba84a8b33ec0837f10bd577f8d663049ce4
GIT binary patch
literal 8196
zcmeHMJ#Q015S_IxFv3zSs)z*X3TmVjP#=-`1(6#llK4Y0k}qc^HuV)Wh>8YLAd-S2
z6@rEui60Q9Nf`z42lxrR*<Jf~e0LEQB4S3`eV3iLJ1_6-+w6si%;s#cL9|LlO*F>#
zZFD8Ud2WTM`H=`{FrUVI8(aM}nG~2hpbn@5>VP_+4yXhFiUZiQIhqywzRPN_4yXhF
zr33tYh|m~gkC{XJ=s;(W0Kf)@ZQ#1i7r@A4>@jnQ48pjnKsVL+BZhI)F&=qd>@job
zrjzl9592Eve?l>~I@XUYolNXddv!n^C^`^fs6h{CkDk+1oZq{zUxm3O?R0wMw1+YN
zsy+Jf@%v+$A6%KAjDmLqPwlt#=DaSAXhuCzomReJ^(98A;m5OEZ{Ir&1y-)4nkDqO
zhYhduf)1%qDGg{S_0&IkJpm)s^K&Zn2v)AAnpLW2m-caIW;CW<IuLqVXHTpi!3gyr
zd%o~ziIwX)>9%qg1xx5z`Gw`^hIJ;P1pe#`HSL#^<$S0m*}glkBGyRKTuBv2=(vB$
zI+`?uBSWZ}(m_E>?V?}C3H6*#*XDW(YlWJw;t5^#&#bF~yH)(;n3FeQF4Xb$&iY)(
zVs2Q!EHCQTc3j;<ny??@p41+Gvvqwgto!chUS4;R&+kQ9Uev80b6sr3y8p8g8tT9`
zbfE4uuk!gHyGhmi|7-Z0sbqCP9r#lROrx{a*#sLKdTH=3AEE7_aWF4)Xs4hPe+b~`
d#Xk&j9f8VoVvm_aj3D$yfVDw8b>Oc$@EZX52x9;M

literal 0
HcmV?d00001

diff --git a/angular/src/components/lock.component.ts b/angular/src/components/lock.component.ts
index bd11e9acce..2262895c05 100644
--- a/angular/src/components/lock.component.ts
+++ b/angular/src/components/lock.component.ts
@@ -1,5 +1,6 @@
-import { Directive, OnInit } from '@angular/core';
+import { Directive, NgZone, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
@@ -51,7 +52,7 @@ export class LockComponent implements OnInit {
         protected storageService: StorageService, protected vaultTimeoutService: VaultTimeoutService,
         protected environmentService: EnvironmentService, protected stateService: StateService,
         protected apiService: ApiService, private logService: LogService,
-        private keyConnectorService: KeyConnectorService) { }
+        private keyConnectorService: KeyConnectorService, private ngZone: NgZone) { }
 
     async ngOnInit() {
         this.pinSet = await this.vaultTimeoutService.isPinLockSet();
@@ -185,7 +186,12 @@ export class LockComponent implements OnInit {
 
     togglePassword() {
         this.showPassword = !this.showPassword;
-        document.getElementById(this.pinLock ? 'pin' : 'masterPassword').focus();
+        const input = document.getElementById(this.pinLock ? 'pin' : 'masterPassword');
+        if (this.ngZone.isStable) {
+            input.focus();
+        } else {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => input.focus());
+        }
     }
 
     private async setKeyAndContinue(key: SymmetricCryptoKey) {
diff --git a/angular/src/components/login.component.ts b/angular/src/components/login.component.ts
index bfac5f5318..eb2678848a 100644
--- a/angular/src/components/login.component.ts
+++ b/angular/src/components/login.component.ts
@@ -1,11 +1,14 @@
 import {
     Directive,
     Input,
+    NgZone,
     OnInit,
 } from '@angular/core';
 
 import { Router } from '@angular/router';
 
+import { take } from 'rxjs/operators';
+
 import { AuthResult } from 'jslib-common/models/domain/authResult';
 
 import { AuthService } from 'jslib-common/abstractions/auth.service';
@@ -51,7 +54,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit
         protected stateService: StateService, environmentService: EnvironmentService,
         protected passwordGenerationService: PasswordGenerationService,
         protected cryptoFunctionService: CryptoFunctionService, private storageService: StorageService,
-        protected logService: LogService) {
+        protected logService: LogService, private ngZone: NgZone) {
         super(environmentService, i18nService, platformUtilsService);
     }
 
@@ -132,7 +135,11 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit
 
     togglePassword() {
         this.showPassword = !this.showPassword;
-        document.getElementById('masterPassword').focus();
+        if (this.ngZone.isStable) {
+            document.getElementById('masterPassword').focus();
+        } else {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => document.getElementById('masterPassword').focus());
+        }
     }
 
     async launchSsoBrowser(clientId: string, ssoRedirectUri: string) {