fix(sqllab): Skip AceEditor in inactive tabs (#30171)

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');

superset-frontend/src/SqlLab/components/SqlEditor/index.tsx

@@ -880,15 +880,17 @@ const SqlEditor: FC<Props> = ({
               startQuery={startQuery}
             />
           )}
-          <AceEditorWrapper
+          {isActive && (
-            autocomplete={autocompleteEnabled}
+            <AceEditorWrapper
-            onBlur={onSqlChanged}
+              autocomplete={autocompleteEnabled}
-            onChange={onSqlChanged}
+              onBlur={onSqlChanged}
-            queryEditorId={queryEditor.id}
+              onChange={onSqlChanged}
-            onCursorPositionChange={handleCursorPositionChange}
+              queryEditorId={queryEditor.id}
-            height={`${aceEditorHeight}px`}
+              onCursorPositionChange={handleCursorPositionChange}
-            hotkeys={hotkeys}
+              height={`${aceEditorHeight}px`}
-          />
+              hotkeys={hotkeys}
+            />
+          )}
           {renderEditorBottomBar(showEmptyState)}
         </div>
         <SouthPane