From 52e2141f4a21251e7387b3ad185ad1ac3c0f547c Mon Sep 17 00:00:00 2001
From: Ragini Pandey <99394366+ragini-pandey@users.noreply.github.com>
Date: Fri, 13 Mar 2026 18:04:40 +0530
Subject: [PATCH] fix(client): use requestAnimationFrame to focus editor on
 mount in Firefox (#66405)

---
 client/src/templates/Challenges/classic/editor.tsx | 6 ++++--
 e2e/independent-lower-jaw.spec.ts                  | 6 ++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index 9413844f554..ff14b230e19 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@@ -1115,10 +1115,12 @@ const Editor = (props: EditorProps): JSX.Element => {
     if (!editor || !canFocusOnMountRef.current) return;
     if (!props.usesMultifileEditor) {
       // Only one editor? Focus it.
-      editor.focus();
+      // Use requestAnimationFrame to ensure focus works in browsers like
+      // Firefox that have stricter programmatic focus policies.
+      requestAnimationFrame(() => editor.focus());
       canFocusOnMountRef.current = false;
     } else if (hasEditableRegion()) {
-      editor.focus();
+      requestAnimationFrame(() => editor.focus());
       canFocusOnMountRef.current = false;
     }
   }
diff --git a/e2e/independent-lower-jaw.spec.ts b/e2e/independent-lower-jaw.spec.ts
index 99c07e4f342..c977be4f238 100644
--- a/e2e/independent-lower-jaw.spec.ts
+++ b/e2e/independent-lower-jaw.spec.ts
@@ -23,6 +23,12 @@ test.use({
   viewport: { width: 1080, height: 720 }
 });
 
+test('Editor is focused on load', async ({ page }) => {
+  await page.goto(workshopChallengeUrl);
+
+  await expect(getEditors(page)).toBeFocused();
+});
+
 test('Clicking "Check Your Code" reveals failing feedback', async ({
   page
 }) => {