From 3aff58769cf70a914382c54c1b239c929f5b33a3 Mon Sep 17 00:00:00 2001
From: "e.mukhametkhanov" <e.mukhametkhanov@vk.team>
Date: Fri, 3 Apr 2026 14:15:37 +0300
Subject: [PATCH 1/6] feat: fix close floating elements and modals when esc
 keydown

---
 .../components/CalendarTime/CalendarTime.tsx  |  18 +--
 .../components/ChipsSelect/ChipsSelect.tsx    |   3 +-
 .../hooks/useInputKeyboardController.ts       |   8 +-
 .../src/components/DateInput/DateInput.tsx    |   4 +-
 .../DateRangeInput/DateRangeInput.tsx         |   4 +-
 .../ModalCard/ModalCardInternal.tsx           |  21 +---
 .../ModalPage/ModalPageInternal.tsx           |  21 +---
 .../src/hooks/useGlobalEscKeyDown.test.tsx    | 116 ++++++++++++++++++
 .../vkui/src/hooks/useGlobalEscKeyDown.ts     |  88 +++++++++++--
 9 files changed, 214 insertions(+), 69 deletions(-)
 create mode 100644 packages/vkui/src/hooks/useGlobalEscKeyDown.test.tsx

diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
index e876fa57e95..d496438b77d 100644
--- a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
+++ b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
@@ -152,20 +152,6 @@ export const CalendarTime = ({
     }
   };
 
-  const stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(
-    (event: React.KeyboardEvent, isOpen: boolean) => {
-      if (isOpen && event.key === 'Escape') {
-        event.stopPropagation();
-      }
-    },
-    [],
-  );
-
-  const onSelectInputKeyDown = (e: React.KeyboardEvent, isOpen: boolean) => {
-    onPickerKeyDown(e);
-    stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen(e, isOpen);
-  };
-
   const renderDoneButton = () => {
     const ButtonComponent = DoneButton ?? Button;
     return (
@@ -191,7 +177,7 @@ export const CalendarTime = ({
         onChange={onChange}
         options={localHours}
         setTime={setHoursFn}
-        onInputKeyDown={onSelectInputKeyDown}
+        onInputKeyDown={onPickerKeyDown}
         inputRef={hoursInputRef}
         inputLabel={changeHoursLabel}
         inputTestId={hoursTestId}
@@ -203,7 +189,7 @@ export const CalendarTime = ({
         onChange={onChange}
         options={localMinutes}
         setTime={setMinutesFn}
-        onInputKeyDown={onSelectInputKeyDown}
+        onInputKeyDown={onPickerKeyDown}
         inputRef={minutesInputRef}
         inputLabel={changeMinutesLabel}
         inputTestId={minutesTestId}
diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
index 4794ce85d7f..dd1909fa2f5 100644
--- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
+++ b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import type { MouseEventHandler } from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
 import { useGlobalOnEventOutside } from '../../hooks/useGlobalOnClickOutside';
 import { useMergeProps } from '../../hooks/useMergeProps';
 import { Keys } from '../../lib/accessibility';
@@ -438,13 +439,13 @@ export const ChipsSelect = <Option extends ChipOption>({
         }
         break;
       }
-      case Keys.ESCAPE:
       case Keys.TAB:
         if (opened) {
           setOpened(false);
         }
     }
   };
+  useGlobalEscKeyDown(opened && !readOnly, () => setOpened(false));
 
   React.useEffect(() => {
     if (focusedOptionIndex === null) {
diff --git a/packages/vkui/src/components/CustomSelect/hooks/useInputKeyboardController.ts b/packages/vkui/src/components/CustomSelect/hooks/useInputKeyboardController.ts
index a18f0f9d0a7..7a93c91f12a 100644
--- a/packages/vkui/src/components/CustomSelect/hooks/useInputKeyboardController.ts
+++ b/packages/vkui/src/components/CustomSelect/hooks/useInputKeyboardController.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useGlobalEscKeyDown } from '../../../hooks/useGlobalEscKeyDown';
 import { Keys, pressedKey } from '../../../lib/accessibility';
 import type { SelectProps } from '../CustomSelect';
 import type { UseFocusedOptionControllerReturn } from './useFocusedOptionController';
@@ -58,9 +59,6 @@ export function useInputKeyboardController({
             open();
           }
           break;
-        case Keys.ESCAPE:
-          close();
-          break;
         case Keys.BACKSPACE:
         case Keys.DELETE: {
           open();
@@ -77,9 +75,11 @@ export function useInputKeyboardController({
           break;
       }
     },
-    [scrollBoxRef, opened, close, focusOption, open, resetFocusedOption, selectFocused],
+    [scrollBoxRef, opened, focusOption, open, resetFocusedOption, selectFocused],
   );
 
+  useGlobalEscKeyDown(opened, () => close());
+
   const handleInputKeydown = React.useCallback(
     (event: React.KeyboardEvent) => {
       onInputKeyDown?.(event, opened);
diff --git a/packages/vkui/src/components/DateInput/DateInput.tsx b/packages/vkui/src/components/DateInput/DateInput.tsx
index ebb0c4f4adf..d59688a9b33 100644
--- a/packages/vkui/src/components/DateInput/DateInput.tsx
+++ b/packages/vkui/src/components/DateInput/DateInput.tsx
@@ -451,9 +451,7 @@ export const DateInput = ({
   const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));
   const showClearButton = value && !readOnly;
 
-  useGlobalEscKeyDown(open && !disableCalendar, closeCalendar, {
-    capture: false,
-  });
+  useGlobalEscKeyDown(open && !disableCalendar, closeCalendar);
 
   return (
     <FormField
diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx
index 5eb32864b1c..4383b620d1c 100644
--- a/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx
+++ b/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx
@@ -425,9 +425,7 @@ export const DateRangeInput = ({
   const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));
   const showClearButton = value && !readOnly;
 
-  useGlobalEscKeyDown(open && !disableCalendar, closeCalendar, {
-    capture: false,
-  });
+  useGlobalEscKeyDown(open && !disableCalendar, closeCalendar);
 
   return (
     <FormField
diff --git a/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx b/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
index 924a15e3473..42ef3634944 100644
--- a/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
@@ -1,13 +1,13 @@
 'use client';
 /* eslint-disable jsdoc/require-jsdoc */
 
-import { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
-import { Keys, pressedKey } from '../../lib/accessibility';
 import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
 import { useBottomSheet } from '../../lib/sheet';
 import { useScrollLock } from '../AppRoot/ScrollContext';
@@ -136,24 +136,13 @@ export const ModalCardInternal = ({
       }
     />
   );
-  const handleEscKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLElement>) => {
-      if (closable && pressedKey(event) === Keys.ESCAPE) {
-        onClose('escape-key');
-      }
-    },
-    [closable, onClose],
-  );
+
+  useGlobalEscKeyDown(closable, () => onClose('escape-key'));
 
   useScrollLock(!hidden);
 
   return (
-    <ModalOutlet
-      hidden={hidden}
-      isDesktop={isDesktop}
-      onKeyDown={handleEscKeyDown}
-      disableModalOverlay={disableModalOverlay}
-    >
+    <ModalOutlet hidden={hidden} isDesktop={isDesktop} disableModalOverlay={disableModalOverlay}>
       {modalOverlay}
       <FocusTrap
         rootRef={handleRef}
diff --git a/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx b/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
index bcfdf53efee..29f13187653 100644
--- a/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
@@ -1,7 +1,7 @@
 'use client';
 /* eslint-disable jsdoc/require-jsdoc */
 
-import { type ComponentType, type KeyboardEvent, useCallback } from 'react';
+import { type ComponentType } from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -10,8 +10,8 @@ import {
   useAdaptivityWithJSMediaQueries,
 } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
 import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
-import { Keys, pressedKey } from '../../lib/accessibility';
 import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
 import { type SnapPoint, type SnapPointChange, useBottomSheet } from '../../lib/sheet';
 import type { CSSCustomProperties } from '../../types';
@@ -150,24 +150,13 @@ export const ModalPageInternal = ({
       }
     />
   );
-  const handleEscKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLElement>) => {
-      if (closable && pressedKey(event) === Keys.ESCAPE) {
-        onClose('escape-key');
-      }
-    },
-    [closable, onClose],
-  );
+
+  useGlobalEscKeyDown(closable, () => onClose('escape-key'));
 
   useScrollLock(!hidden);
 
   return (
-    <ModalOutlet
-      hidden={hidden}
-      isDesktop={isDesktop}
-      onKeyDown={handleEscKeyDown}
-      disableModalOverlay={disableModalOverlay}
-    >
+    <ModalOutlet hidden={hidden} isDesktop={isDesktop} disableModalOverlay={disableModalOverlay}>
       {modalOverlay}
       <FocusTrap
         rootRef={rootRef}
diff --git a/packages/vkui/src/hooks/useGlobalEscKeyDown.test.tsx b/packages/vkui/src/hooks/useGlobalEscKeyDown.test.tsx
new file mode 100644
index 00000000000..559475209ea
--- /dev/null
+++ b/packages/vkui/src/hooks/useGlobalEscKeyDown.test.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { isEscKeyHandled, useGlobalEscKeyDown } from './useGlobalEscKeyDown';
+
+type EscHandlersFixtureProps = {
+  onOuterClose: () => void;
+  onInnerClose: () => void;
+};
+
+const EscHandlersFixture = ({ onOuterClose, onInnerClose }: EscHandlersFixtureProps) => {
+  const [outerOpened, setOuterOpened] = React.useState(true);
+  const [innerOpened, setInnerOpened] = React.useState(true);
+
+  useGlobalEscKeyDown(outerOpened, () => {
+    onOuterClose();
+    setOuterOpened(false);
+  });
+
+  useGlobalEscKeyDown(innerOpened, () => {
+    onInnerClose();
+    setInnerOpened(false);
+  });
+
+  return <input data-testid="target" />;
+};
+
+const SingleEscHandlerFixture = ({
+  enabled,
+  onEscKeyDown,
+}: {
+  enabled: boolean;
+  onEscKeyDown?: (event: KeyboardEvent) => void;
+}) => {
+  useGlobalEscKeyDown(enabled, onEscKeyDown);
+  return <input data-testid="target" />;
+};
+
+describe(useGlobalEscKeyDown, () => {
+  it('should close layers in stack order', () => {
+    const onOuterClose = vi.fn();
+    const onInnerClose = vi.fn();
+    const { getByTestId } = render(
+      <EscHandlersFixture onOuterClose={onOuterClose} onInnerClose={onInnerClose} />,
+    );
+
+    const target = getByTestId('target');
+
+    fireEvent.keyDown(target, { key: 'Escape' });
+    expect(onInnerClose).toHaveBeenCalledTimes(1);
+    expect(onOuterClose).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(target, { key: 'Escape' });
+    expect(onOuterClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should mark escape as handled', () => {
+    const onOuterClose = vi.fn();
+    const onInnerClose = vi.fn();
+    const bubbleListener = vi.fn((event: KeyboardEvent) => isEscKeyHandled(event));
+    const { getByTestId } = render(
+      <EscHandlersFixture onOuterClose={onOuterClose} onInnerClose={onInnerClose} />,
+    );
+
+    document.body.addEventListener('keydown', bubbleListener);
+
+    fireEvent.keyDown(getByTestId('target'), { key: 'Escape' });
+    expect(bubbleListener).toHaveBeenCalledTimes(1);
+    expect(bubbleListener).toHaveReturnedWith(true);
+
+    document.body.removeEventListener('keydown', bubbleListener);
+  });
+
+  it('should not call callback for non-escape keys', () => {
+    const onEscKeyDown = vi.fn();
+    const { getByTestId } = render(<SingleEscHandlerFixture enabled onEscKeyDown={onEscKeyDown} />);
+
+    fireEvent.keyDown(getByTestId('target'), { key: 'Enter' });
+    expect(onEscKeyDown).not.toHaveBeenCalled();
+  });
+
+  it('should not subscribe when callback is not provided', () => {
+    const { getByTestId } = render(<SingleEscHandlerFixture enabled={true} />);
+
+    expect(() => fireEvent.keyDown(getByTestId('target'), { key: 'Escape' })).not.toThrow();
+  });
+
+  it('should re-subscribe when enabled state changes', () => {
+    const onEscKeyDown = vi.fn();
+    const { getByTestId, rerender } = render(
+      <SingleEscHandlerFixture enabled={false} onEscKeyDown={onEscKeyDown} />,
+    );
+
+    fireEvent.keyDown(getByTestId('target'), { key: 'Escape' });
+    expect(onEscKeyDown).not.toHaveBeenCalled();
+
+    rerender(<SingleEscHandlerFixture enabled onEscKeyDown={onEscKeyDown} />);
+
+    fireEvent.keyDown(getByTestId('target'), { key: 'Escape' });
+    expect(onEscKeyDown).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call latest callback after rerender', () => {
+    const firstCallback = vi.fn();
+    const secondCallback = vi.fn();
+    const { getByTestId, rerender } = render(
+      <SingleEscHandlerFixture enabled onEscKeyDown={firstCallback} />,
+    );
+
+    rerender(<SingleEscHandlerFixture enabled onEscKeyDown={secondCallback} />);
+
+    fireEvent.keyDown(getByTestId('target'), { key: 'Escape' });
+    expect(firstCallback).not.toHaveBeenCalled();
+    expect(secondCallback).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/vkui/src/hooks/useGlobalEscKeyDown.ts b/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
index 871b1f54d53..9b916ea3aaa 100644
--- a/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
+++ b/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
@@ -8,36 +8,104 @@ const EVENT_OPTIONS = {
   capture: true,
 };
 
+type EscHandler = {
+  callback: (event: KeyboardEvent) => void;
+};
+
+type EscHandlersStore = {
+  handlers: EscHandler[];
+  onKeyDown: (event: KeyboardEvent) => void;
+};
+
+const ESC_HANDLERS_BY_DOCUMENT = new WeakMap<Document, EscHandlersStore>();
+const ESC_KEY_HANDLED_SYMBOL = Symbol('vkui_esc_key_handled');
+
+export function markEscKeyAsHandled(event: KeyboardEvent): void {
+  Object.defineProperty(event, ESC_KEY_HANDLED_SYMBOL, {
+    value: true,
+    configurable: true,
+  });
+}
+
+export function isEscKeyHandled(event: KeyboardEvent): boolean {
+  return Boolean((event as unknown as Record<symbol, unknown>)[ESC_KEY_HANDLED_SYMBOL]);
+}
+
+function getOrCreateEscHandlersStore(document: Document, options: AddEventListenerOptions) {
+  const existingStore = ESC_HANDLERS_BY_DOCUMENT.get(document);
+  if (existingStore) {
+    return existingStore;
+  }
+
+  const store: EscHandlersStore = {
+    handlers: [],
+    onKeyDown(event) {
+      if (
+        pressedKey(event) !== Keys.ESCAPE ||
+        store.handlers.length === 0 ||
+        isEscKeyHandled(event)
+      ) {
+        return;
+      }
+
+      const activeHandler = store.handlers[store.handlers.length - 1];
+      markEscKeyAsHandled(event);
+      activeHandler.callback(event);
+    },
+  };
+
+  document.addEventListener('keydown', store.onKeyDown, options);
+  ESC_HANDLERS_BY_DOCUMENT.set(document, store);
+
+  return store;
+}
+
 /**
  * Завязывается на document.
  *
  * @private
  */
 export const useGlobalEscKeyDown = (
-  init: boolean,
+  enabled: boolean,
   callback?: (event: KeyboardEvent) => void,
   optionsProp?: AddEventListenerOptions,
 ): void => {
   const { document } = useDOM();
 
+  const init = enabled && !!callback;
+
+  const stableRef = useRef<((event: KeyboardEvent) => void) | null>(null);
+
   const options = useRef<AddEventListenerOptions>(optionsProp || EVENT_OPTIONS);
 
   useIsomorphicLayoutEffect(() => {
     options.current = optionsProp || EVENT_OPTIONS;
-  }, [options]);
+    stableRef.current = callback ?? null;
+  }, [options, callback]);
 
   useIsomorphicLayoutEffect(() => {
-    if (!document || !init || !callback) {
+    if (!document || !init) {
       return;
     }
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (pressedKey(event) === Keys.ESCAPE) {
-        callback(event);
-      }
+
+    const store = getOrCreateEscHandlersStore(document, options.current);
+    const handler: EscHandler = {
+      callback: (event) => {
+        stableRef.current?.(event);
+      },
     };
-    document.addEventListener('keydown', handleKeyDown, options.current);
+    store.handlers.push(handler);
+
     return () => {
-      document.removeEventListener('keydown', handleKeyDown, options.current);
+      const index = store.handlers.indexOf(handler);
+      if (index !== -1) {
+        store.handlers.splice(index, 1);
+      }
+
+      if (store.handlers.length === 0) {
+        document.removeEventListener('keydown', store.onKeyDown, options.current);
+        ESC_HANDLERS_BY_DOCUMENT.delete(document);
+      }
     };
-  }, [init, document, callback]);
+  }, [init, document, stableRef]);
 };

From c16de46b2814bd59e3446ca4aacac9f10dfd7723 Mon Sep 17 00:00:00 2001
From: "e.mukhametkhanov" <e.mukhametkhanov@vk.team>
Date: Fri, 3 Apr 2026 18:35:22 +0300
Subject: [PATCH 2/6] feat: remove handled event flag

---
 .../vkui/src/hooks/useGlobalEscKeyDown.ts     | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/packages/vkui/src/hooks/useGlobalEscKeyDown.ts b/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
index 9b916ea3aaa..5f47229579c 100644
--- a/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
+++ b/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
@@ -18,18 +18,6 @@ type EscHandlersStore = {
 };
 
 const ESC_HANDLERS_BY_DOCUMENT = new WeakMap<Document, EscHandlersStore>();
-const ESC_KEY_HANDLED_SYMBOL = Symbol('vkui_esc_key_handled');
-
-export function markEscKeyAsHandled(event: KeyboardEvent): void {
-  Object.defineProperty(event, ESC_KEY_HANDLED_SYMBOL, {
-    value: true,
-    configurable: true,
-  });
-}
-
-export function isEscKeyHandled(event: KeyboardEvent): boolean {
-  return Boolean((event as unknown as Record<symbol, unknown>)[ESC_KEY_HANDLED_SYMBOL]);
-}
 
 function getOrCreateEscHandlersStore(document: Document, options: AddEventListenerOptions) {
   const existingStore = ESC_HANDLERS_BY_DOCUMENT.get(document);
@@ -40,16 +28,11 @@ function getOrCreateEscHandlersStore(document: Document, options: AddEventListen
   const store: EscHandlersStore = {
     handlers: [],
     onKeyDown(event) {
-      if (
-        pressedKey(event) !== Keys.ESCAPE ||
-        store.handlers.length === 0 ||
-        isEscKeyHandled(event)
-      ) {
+      if (pressedKey(event) !== Keys.ESCAPE || store.handlers.length === 0) {
         return;
       }
 
       const activeHandler = store.handlers[store.handlers.length - 1];
-      markEscKeyAsHandled(event);
       activeHandler.callback(event);
     },
   };

From ec80e8012a390f39604e27d4832c8a3850648211 Mon Sep 17 00:00:00 2001
From: "e.mukhametkhanov" <e.mukhametkhanov@vk.team>
Date: Fri, 3 Apr 2026 18:38:51 +0300
Subject: [PATCH 3/6] fix: remove function

---
 .../src/hooks/useGlobalEscKeyDown.test.tsx    | 19 +------------------
 .../vkui/src/hooks/useGlobalEscKeyDown.ts     | 19 +++++--------------
 2 files changed, 6 insertions(+), 32 deletions(-)

diff --git a/packages/vkui/src/hooks/useGlobalEscKeyDown.test.tsx b/packages/vkui/src/hooks/useGlobalEscKeyDown.test.tsx
index 559475209ea..c391439c870 100644
--- a/packages/vkui/src/hooks/useGlobalEscKeyDown.test.tsx
+++ b/packages/vkui/src/hooks/useGlobalEscKeyDown.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { isEscKeyHandled, useGlobalEscKeyDown } from './useGlobalEscKeyDown';
+import { useGlobalEscKeyDown } from './useGlobalEscKeyDown';
 
 type EscHandlersFixtureProps = {
   onOuterClose: () => void;
@@ -54,23 +54,6 @@ describe(useGlobalEscKeyDown, () => {
     expect(onOuterClose).toHaveBeenCalledTimes(1);
   });
 
-  it('should mark escape as handled', () => {
-    const onOuterClose = vi.fn();
-    const onInnerClose = vi.fn();
-    const bubbleListener = vi.fn((event: KeyboardEvent) => isEscKeyHandled(event));
-    const { getByTestId } = render(
-      <EscHandlersFixture onOuterClose={onOuterClose} onInnerClose={onInnerClose} />,
-    );
-
-    document.body.addEventListener('keydown', bubbleListener);
-
-    fireEvent.keyDown(getByTestId('target'), { key: 'Escape' });
-    expect(bubbleListener).toHaveBeenCalledTimes(1);
-    expect(bubbleListener).toHaveReturnedWith(true);
-
-    document.body.removeEventListener('keydown', bubbleListener);
-  });
-
   it('should not call callback for non-escape keys', () => {
     const onEscKeyDown = vi.fn();
     const { getByTestId } = render(<SingleEscHandlerFixture enabled onEscKeyDown={onEscKeyDown} />);
diff --git a/packages/vkui/src/hooks/useGlobalEscKeyDown.ts b/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
index 5f47229579c..99903e7cd31 100644
--- a/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
+++ b/packages/vkui/src/hooks/useGlobalEscKeyDown.ts
@@ -3,11 +3,6 @@ import { Keys, pressedKey } from '../lib/accessibility';
 import { useDOM } from '../lib/dom';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
-const EVENT_OPTIONS = {
-  passive: true,
-  capture: true,
-};
-
 type EscHandler = {
   callback: (event: KeyboardEvent) => void;
 };
@@ -19,7 +14,7 @@ type EscHandlersStore = {
 
 const ESC_HANDLERS_BY_DOCUMENT = new WeakMap<Document, EscHandlersStore>();
 
-function getOrCreateEscHandlersStore(document: Document, options: AddEventListenerOptions) {
+function getOrCreateEscHandlersStore(document: Document) {
   const existingStore = ESC_HANDLERS_BY_DOCUMENT.get(document);
   if (existingStore) {
     return existingStore;
@@ -37,7 +32,7 @@ function getOrCreateEscHandlersStore(document: Document, options: AddEventListen
     },
   };
 
-  document.addEventListener('keydown', store.onKeyDown, options);
+  document.addEventListener('keydown', store.onKeyDown);
   ESC_HANDLERS_BY_DOCUMENT.set(document, store);
 
   return store;
@@ -51,7 +46,6 @@ function getOrCreateEscHandlersStore(document: Document, options: AddEventListen
 export const useGlobalEscKeyDown = (
   enabled: boolean,
   callback?: (event: KeyboardEvent) => void,
-  optionsProp?: AddEventListenerOptions,
 ): void => {
   const { document } = useDOM();
 
@@ -59,19 +53,16 @@ export const useGlobalEscKeyDown = (
 
   const stableRef = useRef<((event: KeyboardEvent) => void) | null>(null);
 
-  const options = useRef<AddEventListenerOptions>(optionsProp || EVENT_OPTIONS);
-
   useIsomorphicLayoutEffect(() => {
-    options.current = optionsProp || EVENT_OPTIONS;
     stableRef.current = callback ?? null;
-  }, [options, callback]);
+  }, [callback]);
 
   useIsomorphicLayoutEffect(() => {
     if (!document || !init) {
       return;
     }
 
-    const store = getOrCreateEscHandlersStore(document, options.current);
+    const store = getOrCreateEscHandlersStore(document);
     const handler: EscHandler = {
       callback: (event) => {
         stableRef.current?.(event);
@@ -86,7 +77,7 @@ export const useGlobalEscKeyDown = (
       }
 
       if (store.handlers.length === 0) {
-        document.removeEventListener('keydown', store.onKeyDown, options.current);
+        document.removeEventListener('keydown', store.onKeyDown);
         ESC_HANDLERS_BY_DOCUMENT.delete(document);
       }
     };

From 010b29bd64d2766f8457ea675cc467a3881ed390 Mon Sep 17 00:00:00 2001
From: "e.mukhametkhanov" <e.mukhametkhanov@vk.team>
Date: Fri, 3 Apr 2026 19:00:34 +0300
Subject: [PATCH 4/6] test: fix test

---
 packages/vkui/src/components/DateInput/DateInput.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vkui/src/components/DateInput/DateInput.test.tsx b/packages/vkui/src/components/DateInput/DateInput.test.tsx
index fb00414ee70..9a5da5c567b 100644
--- a/packages/vkui/src/components/DateInput/DateInput.test.tsx
+++ b/packages/vkui/src/components/DateInput/DateInput.test.tsx
@@ -690,7 +690,7 @@ describe('DateInput', () => {
 
     it('does not close calendar when Escape is pressed to close inner dropdown (month, year, hour, minute)', async () => {
       const onCalendarOpenChangedStub = vi.fn();
-      render(
+      const { container } = render(
         <DateInput
           value={new Date()}
           accessible
@@ -730,7 +730,7 @@ describe('DateInput', () => {
         expect(screen.queryByRole('listbox')).toBeTruthy();
 
         // закрываем дропдаун с помощью Escape
-        await userEvent.keyboard('{Escape}');
+        fireEvent.keyDown(container, { key: 'Escape' });
         expect(screen.queryByRole('listbox')).toBeFalsy();
 
         // календарь всё ещё должен быть открыт
@@ -739,7 +739,7 @@ describe('DateInput', () => {
       }
 
       // закрываем календарь с помощью Escape
-      await userEvent.keyboard('{Escape}');
+      fireEvent.keyDown(container, { key: 'Escape' });
       // календарь закрыт
       expect(screen.queryByRole('dialog', { name: 'Календарь' })).toBeFalsy();
       expect(onCalendarOpenChangedStub).toHaveBeenCalledTimes(2);

From 63812e9c39528791986c04af0765aa0811bda401 Mon Sep 17 00:00:00 2001
From: "e.mukhametkhanov" <e.mukhametkhanov@vk.team>
Date: Fri, 3 Apr 2026 19:12:27 +0300
Subject: [PATCH 5/6] test: fix test

---
 .../src/components/DateRangeInput/DateRangeInput.test.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx
index bb1ee812f40..1faea5fc11e 100644
--- a/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx
+++ b/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx
@@ -516,7 +516,7 @@ describe('DateRangeInput', () => {
     it('does not close calendar when Escape is pressed to close inner dropdown (month, year)', async () => {
       const onCalendarOpenChangedStub = vi.fn();
       const dateNow = new Date();
-      render(
+      const { container } = render(
         <DateRangeInput
           value={[dateNow, addDays(dateNow, 1)]}
           accessible
@@ -550,7 +550,7 @@ describe('DateRangeInput', () => {
         expect(screen.queryByRole('listbox')).toBeTruthy();
 
         // закрываем дропдаун с помощью Escape
-        await userEvent.keyboard('{Escape}');
+        fireEvent.keyDown(container, { key: 'Escape' });
         expect(screen.queryByRole('listbox')).toBeFalsy();
 
         // календарь всё ещё должен быть открыт
@@ -559,7 +559,7 @@ describe('DateRangeInput', () => {
       }
 
       // закрываем календарь с помощью Escape
-      await userEvent.keyboard('{Escape}');
+      fireEvent.keyDown(container, { key: 'Escape' });
       // календарь закрыт
       expect(screen.queryByRole('dialog', { name: 'Календарь' })).toBeFalsy();
       expect(onCalendarOpenChangedStub).toHaveBeenCalledTimes(2);

From 32a3953e0343e48a4b733d80545b66e64e24ac6c Mon Sep 17 00:00:00 2001
From: "e.mukhametkhanov" <e.mukhametkhanov@vk.team>
Date: Mon, 6 Apr 2026 11:07:12 +0300
Subject: [PATCH 6/6] fix: remove stopPropagation in CalendarHeader

---
 .../src/components/CalendarHeader/CalendarHeader.tsx  | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
index af18bd6e20c..3332a94672d 100644
--- a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
+++ b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
@@ -221,15 +221,6 @@ export const CalendarHeader = ({
     );
   }
 
-  const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(
-    (event: React.KeyboardEvent, isOpen: boolean) => {
-      if (isOpen && event.key === 'Escape') {
-        event.stopPropagation();
-      }
-    },
-    [],
-  );
-
   return (
     <RootComponent baseClassName={styles.host} {...restProps}>
       {!prevMonthHidden && (
@@ -271,7 +262,6 @@ export const CalendarHeader = ({
               onChange={onMonthsChange}
               forceDropdownPortal={false}
               selectType="accent"
-              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}
               slotProps={{
                 input: {
                   'aria-label': changeMonthLabel,
@@ -292,7 +282,6 @@ export const CalendarHeader = ({
               onChange={onYearChange}
               forceDropdownPortal={false}
               selectType="accent"
-              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}
               slotProps={{
                 input: {
                   'aria-label': changeYearLabel,