Auto-focus first input field of Login (as staff and patient)

[Rishav-Bagri]

Proposed Changes

Fixes #16604

• added a useEffect so whenever the mode changes the inputs autofocus
• added requestAnimationFrame(), so it first waits for the DOM to change and then perform the fn afterwards

Screen.Recording.2026-07-28.170709.mp4

Tagging: @ohcnetwork/care-fe-code-reviewers

Merge Checklist

• Add specs that demonstrate the bug or test the new feature.
• Update product documentation.
• Ensure that UI text is placed in I18n files.
• Prepare a screenshot or demo video for the changelog entry and attach it to the issue.
• Request peer reviews.
• Complete QA on mobile devices.
• Complete QA on desktop devices.
• Add or update Playwright tests for related changes

Summary by CodeRabbit

• Usability Improvements
  • Automatically focuses the relevant login field when switching between staff and patient sign-in modes.
  • Makes tab and mode changes faster and easier to use.

[greptile-apps]

Greptile Summary

Adds automatic focus management to the login form.

• Focuses the username field when staff mode becomes active.
• Focuses the phone field when patient mode becomes active.
• Defers focus until the next animation frame so the active tab content can render first.

Confidence Score: 5/5

The PR appears safe to merge, with no concrete blocking or independently actionable issues identified.

The change only schedules focus for the active login mode’s fixed input ID, and missing elements are handled safely by optional chaining.

Important Files Changed

Filename	Overview
src/components/Auth/Login.tsx	Adds a mode-dependent effect that focuses the first input after the corresponding staff or patient login form renders.

_{Reviews (1): Last reviewed commit: "Auto-focus first input field of Login (a..." | Re-trigger Greptile}

[coderabbitai]

Walkthrough

Changes

Login autofocus

Layer / File(s)	Summary
Mode-based input focus src/components/Auth/Login.tsx	A useEffect responds to login mode changes and schedules focus on the username input for staff mode or the phone input for patient mode.

Suggested reviewers: amjithtitus09, jacobjeevan

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: auto-focusing Login inputs for staff and patient modes.
Description check	✅ Passed	The description includes the issue reference, change summary, tagging, and most required checklist items.
Linked Issues check	✅ Passed	The change satisfies all linked objectives: initial focus for staff and patient, and refocus when switching tabs.
Out of Scope Changes check	✅ Passed	The summary indicates only the Login focus behavior changed, with no unrelated or out-of-scope additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/Auth/Login.tsx`:
- Around line 130-135: Update the autofocus effect keyed by mode to derive the
target from the same effective login mode used by the rendered UI, including the
missing/invalid-mode fallback and disablePatientLogin staff-only case. Focus
username whenever staff UI is rendered; only target phone for the patient form.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 1c3b6426-fa5b-42c0-8cf9-7eb8dcd7fc59

📥 Commits

Reviewing files that changed from the base of the PR and between 53ae683 and 32a77fd.

📒 Files selected for processing (1)

• src/components/Auth/Login.tsx

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Derive the focus target from the rendered login mode.

The UI falls back to staff mode when mode is missing/invalid, and disablePatientLogin also renders staff-only UI. This effect treats every value except exact "staff" as patient, so it searches for #phone while the staff form is rendered and fails to autofocus the username.

+  const activeMode =
+    !disablePatientLogin && mode === "patient" ? "patient" : "staff";
+
   // Autofocuses when switching tabs
   useEffect(() => {
-    requestAnimationFrame(() => {
-      document.getElementById(mode === "staff" ? "username" : "phone")?.focus();
+    const frame = requestAnimationFrame(() => {
+      document
+        .getElementById(activeMode === "staff" ? "username" : "phone")
+        ?.focus();
     });
-  }, [mode]);
+    return () => cancelAnimationFrame(frame);
+  }, [activeMode]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	// Autofocuses when switching tabs
	useEffect(() => {
	requestAnimationFrame(() => {
	document.getElementById(mode === "staff" ? "username" : "phone")?.focus();
	});
	}, [mode]);
	const activeMode =
	!disablePatientLogin && mode === "patient" ? "patient" : "staff";
	// Autofocuses when switching tabs
	useEffect(() => {
	const frame = requestAnimationFrame(() => {
	document
	.getElementById(activeMode === "staff" ? "username" : "phone")
	?.focus();
	});
	return () => cancelAnimationFrame(frame);
	}, [activeMode]);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Auth/Login.tsx` around lines 130 - 135, Update the autofocus
effect keyed by mode to derive the target from the same effective login mode
used by the rendered UI, including the missing/invalid-mode fallback and
disablePatientLogin staff-only case. Focus username whenever staff UI is
rendered; only target phone for the patient form.