diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/use_ui_ace_keyboard_mode.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/use_ui_ace_keyboard_mode.tsx index 2b2387e04622c..269f4e2cdeb72 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/use_ui_ace_keyboard_mode.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/use_ui_ace_keyboard_mode.tsx @@ -99,7 +99,10 @@ export function useUIAceKeyboardMode(aceTextAreaElement: HTMLTextAreaElement | n if (aceTextAreaElement) { document.removeEventListener('keydown', documentKeyDownListener); aceTextAreaElement.removeEventListener('keydown', aceKeydownListener); - document.removeChild(overlayMountNode.current!); + const textAreaContainer = aceTextAreaElement.parentElement; + if (textAreaContainer && textAreaContainer.contains(overlayMountNode.current!)) { + textAreaContainer.removeChild(overlayMountNode.current!); + } } }; }, [aceTextAreaElement]); diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx index 8386eaf46e445..c29a19df3772a 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx @@ -176,13 +176,17 @@ export function Main() { useEffect(() => { let resizerSubscriptions: Array<() => void> = []; - const subscription = editorsReady$.subscribe(([input, output]) => { + const readySubscription = editorsReady$.subscribe(([input, output]) => { settings.registerOutput(output.editor); settings.registerInput(input.editor); history.setEditor(input.editor); init(input.editor, output.editor, history); + // This may kick of a polling mechanic, needs to be refactored to more + // standard subscription pattern. + mappings.retrieveAutoCompleteInfo(); + resizerSubscriptions = resizerSubscriptions.concat([ subscribeResizeChecker(ResizeChecker, containerRef.current!, input.editor, output.editor), subscribeResizeChecker(ResizeChecker, input.element, input.editor), @@ -196,7 +200,8 @@ export function Main() { return () => { resizerSubscriptions.map(done => done()); - subscription.unsubscribe(); + readySubscription.unsubscribe(); + mappings.clearSubscriptions(); }; }, []); diff --git a/src/legacy/core_plugins/console/np_ready/public/legacy.ts b/src/legacy/core_plugins/console/np_ready/public/legacy.ts index 7b8d27510d385..c107469f12f22 100644 --- a/src/legacy/core_plugins/console/np_ready/public/legacy.ts +++ b/src/legacy/core_plugins/console/np_ready/public/legacy.ts @@ -34,7 +34,7 @@ import 'ui/capabilities/route_setup'; /* eslint-enable @kbn/eslint/no-restricted-paths */ import template from '../../public/quarantined/index.html'; -import { App } from '../../../../../core/public'; +import { App, AppUnmount } from '../../../../../core/public'; export interface XPluginSet { __LEGACY: { @@ -64,12 +64,14 @@ uiRoutes.when('/dev_tools/console', { throw new Error(message); } + let unmount: AppUnmount | Promise; + const mockedSetupCore = { ...npSetup.core, application: { register(app: App): void { try { - app.mount(anyObject, { element: targetElement, appBasePath: '' }); + unmount = app.mount(anyObject, { element: targetElement, appBasePath: '' }); } catch (e) { npSetup.core.fatalErrors.add(e); } @@ -87,6 +89,13 @@ uiRoutes.when('/dev_tools/console', { }, }); pluginInstance.start(npStart.core); + + $scope.$on('$destroy', async () => { + if (unmount) { + const fn = await unmount; + fn(); + } + }); }; }, template, diff --git a/src/legacy/core_plugins/console/public/quarantined/src/app.js b/src/legacy/core_plugins/console/public/quarantined/src/app.js index 610e006f76e0f..e6bb96726dad9 100644 --- a/src/legacy/core_plugins/console/public/quarantined/src/app.js +++ b/src/legacy/core_plugins/console/public/quarantined/src/app.js @@ -18,7 +18,6 @@ */ const $ = require('jquery'); -const mappings = require('./mappings'); const DEFAULT_INPUT_VALUE = `GET _search { @@ -92,5 +91,4 @@ export default function init(input, output, history, sourceLocation = 'stored') setupAutosave(); loadSavedState(); - mappings.retrieveAutoCompleteInfo(); } diff --git a/src/legacy/core_plugins/console/public/quarantined/src/mappings.js b/src/legacy/core_plugins/console/public/quarantined/src/mappings.js index 4538b058c2d8b..05b436f3ffa2c 100644 --- a/src/legacy/core_plugins/console/public/quarantined/src/mappings.js +++ b/src/legacy/core_plugins/console/public/quarantined/src/mappings.js @@ -290,10 +290,16 @@ function retrieveSettings(settingsKey, settingsToRetrieve) { // unchanged alone (both selected and unselected). // 3. Poll: Use saved. Fetch selected. Ignore unselected. -function retrieveAutoCompleteInfo(settingsToRetrieve = legacyBackDoorToSettings().getAutocomplete()) { + +function clearSubscriptions() { if (pollTimeoutId) { clearTimeout(pollTimeoutId); } +} + + +function retrieveAutoCompleteInfo(settingsToRetrieve = legacyBackDoorToSettings().getAutocomplete()) { + clearSubscriptions(); const mappingPromise = retrieveSettings('fields', settingsToRetrieve); const aliasesPromise = retrieveSettings('indices', settingsToRetrieve); @@ -347,4 +353,5 @@ export default { expandAliases, clear, retrieveAutoCompleteInfo, + clearSubscriptions };