From 4d1db9e32c006412cc8360545a465d9ecbf2329d Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Fri, 6 Sep 2024 09:58:59 -0700
Subject: [PATCH] fix(sqllab): Skip AceEditor in inactive tabs (#30171)

---
 .../components/SqlEditor/SqlEditor.test.tsx   | 12 +++++++++++
 .../src/SqlLab/components/SqlEditor/index.tsx | 20 ++++++++++---------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx
index d24c7e9d8bb67..b6af5d8f0e836 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx
@@ -189,6 +189,18 @@ describe('SqlEditor', () => {
     expect(await findByTestId('react-ace')).toBeInTheDocument();
   });
 
+  it('skip rendering an AceEditorWrapper when the current tab is inactive', async () => {
+    const { findByTestId, queryByTestId } = setup(
+      {
+        ...mockedProps,
+        queryEditor: initialState.sqlLab.queryEditors[1],
+      },
+      store,
+    );
+    expect(await findByTestId('mock-sql-editor-left-bar')).toBeInTheDocument();
+    expect(queryByTestId('react-ace')).not.toBeInTheDocument();
+  });
+
   it('avoids rerendering EditorLeftBar and ResultSet while typing', async () => {
     const { findByTestId } = setup(mockedProps, store);
     const editor = await findByTestId('react-ace');
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
index c17ac9324bdca..a0e8ff4f5f02e 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -880,15 +880,17 @@ const SqlEditor: FC<Props> = ({
               startQuery={startQuery}
             />
           )}
-          <AceEditorWrapper
-            autocomplete={autocompleteEnabled}
-            onBlur={onSqlChanged}
-            onChange={onSqlChanged}
-            queryEditorId={queryEditor.id}
-            onCursorPositionChange={handleCursorPositionChange}
-            height={`${aceEditorHeight}px`}
-            hotkeys={hotkeys}
-          />
+          {isActive && (
+            <AceEditorWrapper
+              autocomplete={autocompleteEnabled}
+              onBlur={onSqlChanged}
+              onChange={onSqlChanged}
+              queryEditorId={queryEditor.id}
+              onCursorPositionChange={handleCursorPositionChange}
+              height={`${aceEditorHeight}px`}
+              hotkeys={hotkeys}
+            />
+          )}
           {renderEditorBottomBar(showEmptyState)}
         </div>
         <SouthPane