From 32a77fdc39cb3026fe766ed9a5b7314444aa5890 Mon Sep 17 00:00:00 2001 From: Rishav Date: Tue, 28 Jul 2026 17:02:54 +0530 Subject: [PATCH 1/4] Auto-focus first input field of Login (as staff and patient) --- src/components/Auth/Login.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx index f0c2d1d63c5..619fa7e6eab 100644 --- a/src/components/Auth/Login.tsx +++ b/src/components/Auth/Login.tsx @@ -127,6 +127,13 @@ const Login = (props: LoginProps) => { localStorage.setItem(LocalStorageKeys.loginPreference, mode); }, [mode]); + // Autofocuses when switching tabs + useEffect(() => { + requestAnimationFrame(() => { + document.getElementById(mode === "staff" ? "username" : "phone")?.focus(); + }); + }, [mode]); + // Send OTP Mutation const { mutate: sendOtp, isPending: sendOtpPending } = useMutation({ mutationFn: mutate(otpApi.send), From 2dc2e62fb4b4178705ccac8e7fe297c51a5940ec Mon Sep 17 00:00:00 2001 From: Rishav Date: Fri, 31 Jul 2026 22:32:26 +0530 Subject: [PATCH 2/4] Changes according to AI review --- src/components/Auth/Login.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx index 619fa7e6eab..2274c93552c 100644 --- a/src/components/Auth/Login.tsx +++ b/src/components/Auth/Login.tsx @@ -108,6 +108,8 @@ const Login = (props: LoginProps) => { const [otpError, setOtpError] = useState(""); const [otpValidationError, setOtpValidationError] = useState(""); const [resendOtpCountdown, setResendOtpCountdown] = useState(0); + const activeMode = + !disablePatientLogin && mode === "patient" ? "patient" : "staff"; // Timer Function for resend OTP useEffect(() => { @@ -129,10 +131,11 @@ const Login = (props: LoginProps) => { // Autofocuses when switching tabs useEffect(() => { - requestAnimationFrame(() => { + const frame = requestAnimationFrame(() => { document.getElementById(mode === "staff" ? "username" : "phone")?.focus(); }); - }, [mode]); + return cancelAnimationFrame(frame); + }, [activeMode]); // Send OTP Mutation const { mutate: sendOtp, isPending: sendOtpPending } = useMutation({ From d33351b9e01019ca1c8f96beee92fae280fd62ea Mon Sep 17 00:00:00 2001 From: Rishav Date: Fri, 31 Jul 2026 22:38:45 +0530 Subject: [PATCH 3/4] Fix requestAnimation function cleanup --- src/components/Auth/Login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx index 2274c93552c..13d13a38118 100644 --- a/src/components/Auth/Login.tsx +++ b/src/components/Auth/Login.tsx @@ -134,7 +134,7 @@ const Login = (props: LoginProps) => { const frame = requestAnimationFrame(() => { document.getElementById(mode === "staff" ? "username" : "phone")?.focus(); }); - return cancelAnimationFrame(frame); + return () => cancelAnimationFrame(frame); }, [activeMode]); // Send OTP Mutation From bb92b0c66dc71e6226077fb39f536e72cffe0a4e Mon Sep 17 00:00:00 2001 From: Rishav Date: Fri, 31 Jul 2026 22:45:26 +0530 Subject: [PATCH 4/4] changed mode to activeMode in DOM --- src/components/Auth/Login.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx index 13d13a38118..98b6c62e664 100644 --- a/src/components/Auth/Login.tsx +++ b/src/components/Auth/Login.tsx @@ -132,7 +132,9 @@ const Login = (props: LoginProps) => { // Autofocuses when switching tabs useEffect(() => { const frame = requestAnimationFrame(() => { - document.getElementById(mode === "staff" ? "username" : "phone")?.focus(); + document + .getElementById(activeMode === "staff" ? "username" : "phone") + ?.focus(); }); return () => cancelAnimationFrame(frame); }, [activeMode]);