Fix ace a11y listener (#60639)

jloleysens · elasticmachine · jloleysens · commit ee1a10a3f249 · 2020-03-20T10:41:20.000+01:00
Also move the hook use_ui_ace_keyboard_mode.tsx into es_ui_shared

This was defined (and used) in both Console and SearchProfiler.

Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;
# Conflicts:
#	src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/use_ui_ace_keyboard_mode.tsx
#	src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx
#	src/plugins/console/public/application/containers/editor/legacy/use_ui_ace_keyboard_mode.tsx
#	src/plugins/es_ui_shared/public/index.ts
#	src/plugins/es_ui_shared/public/use_ui_ace_keyboard_mode.tsx
#	x-pack/legacy/plugins/searchprofiler/public/np_ready/application/editor/use_ui_ace_keyboard_mode.tsx
#	x-pack/plugins/searchprofiler/public/application/editor/editor.tsx
diff --git a/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/console_editor/editor.tsx b/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/console_editor/editor.tsx
@@ -28,7 +28,7 @@ import * as qs from 'querystring-browser';
 
 import { EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useServicesContext, useEditorReadContext } from '../../../../contexts';
-import { useUIAceKeyboardMode } from '../use_ui_ace_keyboard_mode';
+import { useUIAceKeyboardMode } from '../../../../../../../../../../plugins/es_ui_shared/public';
 import { ConsoleMenu } from '../../../../components';
 
 import { autoIndent, getDocumentation } from '../console_menu_actions';
diff --git a/src/plugins/es_ui_shared/public/index.ts b/src/plugins/es_ui_shared/public/index.ts
@@ -18,3 +18,5 @@
  */
 
 export * from './components/json_editor';
+
+export { useUIAceKeyboardMode } from './use_ui_ace_keyboard_mode';
diff --git a/src/plugins/es_ui_shared/public/use_ui_ace_keyboard_mode.tsx b/src/plugins/es_ui_shared/public/use_ui_ace_keyboard_mode.tsx
@@ -96,7 +96,7 @@ export function useUIAceKeyboardMode(aceTextAreaElement: HTMLTextAreaElement | n
     }
     return () => {
       if (aceTextAreaElement) {
-        document.removeEventListener('keydown', documentKeyDownListener);
+        document.removeEventListener('keydown', documentKeyDownListener, { capture: true });
         aceTextAreaElement.removeEventListener('keydown', aceKeydownListener);
         const textAreaContainer = aceTextAreaElement.parentElement;
         if (textAreaContainer && textAreaContainer.contains(overlayMountNode.current!)) {
diff --git a/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/editor/editor.tsx b/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/editor/editor.tsx
@@ -8,7 +8,7 @@ import React, { memo, useRef, useEffect, useState } from 'react';
 import { Editor as AceEditor } from 'brace';
 
 import { initializeEditor } from './init_editor';
-import { useUIAceKeyboardMode } from './use_ui_ace_keyboard_mode';
+import { useUIAceKeyboardMode } from '../../../../../../../../src/plugins/es_ui_shared/public';
 
 interface EditorShim {
   getValue(): string;
diff --git a/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/editor/use_ui_ace_keyboard_mode.tsx b/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/editor/use_ui_ace_keyboard_mode.tsx

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ export function useUIAceKeyboardMode(aceTextAreaElement: HTMLTextAreaElement \| n`
`96`	`96`	`}`
`97`	`97`	`return () => {`
`98`	`98`	`if (aceTextAreaElement) {`
`99`		`- document.removeEventListener('keydown', documentKeyDownListener);`
	`99`	`+ document.removeEventListener('keydown', documentKeyDownListener, { capture: true });`
`100`	`100`	`aceTextAreaElement.removeEventListener('keydown', aceKeydownListener);`
`101`	`101`	`const textAreaContainer = aceTextAreaElement.parentElement;`
`102`	`102`	`if (textAreaContainer && textAreaContainer.contains(overlayMountNode.current!)) {`