diff --git a/src/platform/plugins/private/inspect_component/public/components/inspect/inspect_button.test.tsx b/src/platform/plugins/private/inspect_component/public/components/inspect/inspect_button.test.tsx
index 1727f99786886..310962e6d6d26 100644
--- a/src/platform/plugins/private/inspect_component/public/components/inspect/inspect_button.test.tsx
+++ b/src/platform/plugins/private/inspect_component/public/components/inspect/inspect_button.test.tsx
@@ -19,6 +19,7 @@ import { mockBranch } from '../../__mocks__/mocks';
jest.mock('../../lib/keyboard_shortcut/keyboard_shortcut', () => ({
isKeyboardShortcut: jest.fn(),
isMac: jest.fn(),
+ isEscapeKey: jest.fn(),
}));
const mockedIsKeyboardShortcut = jest.mocked(isKeyboardShortcut);
diff --git a/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.test.tsx b/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.test.tsx
index a3674f38fb1f0..18d74d6766044 100644
--- a/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.test.tsx
+++ b/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.test.tsx
@@ -16,6 +16,7 @@ import { InspectOverlay } from './inspect_overlay';
import { getElementFromPoint } from '../../../lib/dom/get_element_from_point';
import { findSourceComponent } from '../../../lib/fiber/find_source_component';
import { getInspectedElementData } from '../../../lib/get_inspected_element_data';
+import { isEscapeKey } from '../../../lib/keyboard_shortcut/keyboard_shortcut';
import { mockBranch } from '../../../__mocks__/mocks';
jest.mock('../../../lib/dom/get_element_from_point', () => ({
@@ -30,6 +31,12 @@ jest.mock('../../../lib/get_inspected_element_data', () => ({
getInspectedElementData: jest.fn(),
}));
+jest.mock('../../../lib/keyboard_shortcut/keyboard_shortcut', () => ({
+ isKeyboardShortcut: jest.fn(),
+ isMac: jest.fn(),
+ isEscapeKey: jest.fn(),
+}));
+
describe('InspectOverlay', () => {
let mockCoreStart: CoreStart;
@@ -130,4 +137,23 @@ describe('InspectOverlay', () => {
expect(setFlyoutOverlayRef).not.toHaveBeenCalled();
});
});
+
+ it('should close overlay when escape key is pressed', () => {
+ const setIsInspecting = jest.fn();
+
+ (isEscapeKey as jest.Mock).mockReturnValue(true);
+
+ renderWithI18n(
+
+ );
+
+ fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' });
+
+ expect(setIsInspecting).toHaveBeenCalledWith(false);
+ });
});
diff --git a/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.tsx b/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.tsx
index 9b714699642eb..55bd8f0dabd1d 100644
--- a/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.tsx
+++ b/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.tsx
@@ -14,6 +14,7 @@ import { Global } from '@emotion/react';
import type { CoreStart, OverlayRef } from '@kbn/core/public';
import { EuiPortal, EuiWindowEvent, transparentize, useEuiTheme } from '@elastic/eui';
import { toMountPoint } from '@kbn/react-kibana-mount';
+import { isEscapeKey } from '../../../lib/keyboard_shortcut/keyboard_shortcut';
import { findFirstFiberWithDebugSource } from '../../../lib/fiber/find_first_fiber_with_debug_source';
import { handleEventPropagation } from '../../../lib/dom/handle_event_propagation';
import { getInspectedElementData } from '../../../lib/get_inspected_element_data';
@@ -55,6 +56,16 @@ export const InspectOverlay = ({ core, branch, setFlyoutOverlayRef, setIsInspect
[euiTheme.colors.backgroundFilledText, euiTheme.levels.toast]
);
+ const handleKeydown = useCallback(
+ (event: KeyboardEvent) => {
+ if (isEscapeKey(event)) {
+ event.preventDefault();
+ setIsInspecting(false);
+ }
+ },
+ [setIsInspecting]
+ );
+
const handlePointerMove = useCallback((event: PointerEvent) => {
const target = getElementFromPoint(event);
@@ -154,6 +165,7 @@ export const InspectOverlay = ({ core, branch, setFlyoutOverlayRef, setIsInspect
id={INSPECT_OVERLAY_ID}
data-test-subj="inspectOverlayContainer"
>
+
),
- [overlayCss, highlightPosition, sourceComponent?.type, handlePointerMove]
+ [overlayCss, highlightPosition, sourceComponent?.type, handlePointerMove, handleKeydown]
);
return {overlayContent};
diff --git a/src/platform/plugins/private/inspect_component/public/lib/keyboard_shortcut/keyboard_shortcut.ts b/src/platform/plugins/private/inspect_component/public/lib/keyboard_shortcut/keyboard_shortcut.ts
index 687fbdaea0a33..808b001f420b7 100644
--- a/src/platform/plugins/private/inspect_component/public/lib/keyboard_shortcut/keyboard_shortcut.ts
+++ b/src/platform/plugins/private/inspect_component/public/lib/keyboard_shortcut/keyboard_shortcut.ts
@@ -31,3 +31,9 @@ export const isMac = (): boolean =>
((navigator as any)?.userAgentData?.platform || navigator.userAgent)
.toLowerCase()
.includes('mac');
+
+/**
+ * Check if Escape key was pressed.
+ * @return {boolean} 'true' if Escape key was pressed, 'false' otherwise.
+ */
+export const isEscapeKey = (event: KeyboardEvent): boolean => event.key === 'Escape';