diff --git a/superset-frontend/packages/superset-core/src/api/editors.ts b/superset-frontend/packages/superset-core/src/api/editors.ts index 1113bc8d729..cb151be75fa 100644 --- a/superset-frontend/packages/superset-core/src/api/editors.ts +++ b/superset-frontend/packages/superset-core/src/api/editors.ts @@ -480,6 +480,18 @@ export interface EditorHandle { * @returns A Disposable that removes the provider when disposed */ registerCompletionProvider(provider: CompletionProvider): Disposable; + + /** + * Force the editor to recalculate its dimensions. + * Called when the container size changes or when the editor becomes + * visible after being hidden (e.g., in a tab). + * + * Each editor implementation maps this to their equivalent: + * - Ace: editor.resize() + * - Monaco: editor.layout() + * - CodeMirror: editor.requestMeasure() + */ + resize(): void; } /** diff --git a/superset-frontend/src/core/editors/AceEditorProvider.tsx b/superset-frontend/src/core/editors/AceEditorProvider.tsx index 9236403a3b3..abdf76d14f1 100644 --- a/superset-frontend/src/core/editors/AceEditorProvider.tsx +++ b/superset-frontend/src/core/editors/AceEditorProvider.tsx @@ -182,6 +182,10 @@ const createAceEditorHandle = ( completionProviders.current.delete(provider.id); }); }, + + resize: () => { + aceEditorRef.current?.editor?.resize(); + }, }); /** diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.tsx index 2a29116e118..f5b1eee033f 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.tsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.tsx @@ -22,30 +22,52 @@ import { screen, selectOption, userEvent, + waitFor, } from 'spec/helpers/testing-library'; import AdhocFilter from '../AdhocFilter'; import { Clauses, ExpressionTypes } from '../types'; import AdhocFilterEditPopoverSqlTabContent from '.'; +// Track resize calls for testing +const mockResize = jest.fn(); + +// Mock EditorHost with ref support for resize +jest.mock('src/core/editors', () => { + const React = require('react'); + return { + EditorHost: React.forwardRef( + ( + { + value, + onChange, + }: { + value: string; + onChange: (v: string) => void; + }, + ref: React.Ref<{ resize: () => void }>, + ) => { + React.useImperativeHandle(ref, () => ({ + resize: mockResize, + })); + return ( +