diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx
index ef452f20fdf7d..fd3bcdc8bed8a 100644
--- a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx
@@ -17,6 +17,8 @@ import {
EuiFlexGroup,
EuiFlexItem,
euiScrollBarStyles,
+ EuiWindowEvent,
+ keys,
} from '@elastic/eui';
import { euiThemeVars } from '@kbn/ui-theme';
import type { Datatable } from '@kbn/expressions-plugin/public';
@@ -392,40 +394,51 @@ export function LensEditConfigurationFlyout({
getUserMessages,
]);
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === keys.ESCAPE) {
+ closeFlyout?.();
+ setIsInlineFlyoutVisible(false);
+ }
+ };
+
if (isLoading) return null;
// Example is the Discover editing where we dont want to render the text based editor on the panel, neither the suggestions (for now)
if (!canEditTextBasedQuery && hidesSuggestions) {
return (
-
-
-
+ <>
+ {isInlineFlyoutVisible && }
+
+
+
+ >
);
}
return (
<>
+ {isInlineFlyoutVisible && }