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

preset-io · Sep 6, 2024 · 4d1db9e · 4d1db9e
1 parent 6294e33
commit 4d1db9e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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