From 6b26ce2e0f3959d75bd3b98634abe6e358ff18c7 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Fri, 15 Oct 2021 12:42:50 +0200
Subject: [PATCH] fix(client): only target editor calls for focus (#43839)

For legacy challenges, there's only one editor and it must be focused.

For project steps, only the editor with the editable region should call
for focus.
---
 .../templates/Challenges/classic/editor.tsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index 78bbf70d27..6d987d5f2a 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@@ -334,8 +334,7 @@ const Editor = (props: EditorProps): JSX.Element => {
     // Users who are using screen readers should not have to move focus from
     // the editor to the description every time they open a challenge.
     if (props.canFocus && !accessibilityMode) {
-      // TODO: only one Editor should be calling for focus at once.
-      editor.focus();
+      focusIfTargetEditor();
     } else focusOnHotkeys();
     // Removes keybind for intellisense
     // Private method - hopefully changes with future version
@@ -683,6 +682,17 @@ const Editor = (props: EditorProps): JSX.Element => {
     return editableRegionBoundaries.length === 2;
   }
 
+  function focusIfTargetEditor() {
+    const { editor } = data;
+    if (!editor) return;
+    if (!props.usesMultifileEditor) {
+      // Only one editor? Focus it.
+      editor.focus();
+    } else if (hasEditableRegion()) {
+      editor.focus();
+    }
+  }
+
   function initializeRegions(editableRegion: number[]) {
     const { model } = data;
     const monaco = monacoRef.current;
@@ -998,13 +1008,14 @@ const Editor = (props: EditorProps): JSX.Element => {
       updateOutputZone();
     }
 
-    if (hasChangedContents && !hasEditableRegion()) editor?.focus();
+    if (hasChangedContents) {
+      focusIfTargetEditor();
+    }
 
     if (props.initialTests) initTests(props.initialTests);
 
     if (hasEditableRegion() && editor) {
       if (hasChangedContents) {
-        editor.focus();
         showEditableRegion(editor);
       }
       // resetting test output