Popup: Support _ignoreCloseOnChildEscape option

Author: Ruslan Farkhutdinov

packages/devextreme/js/__internal/ui/popup/m_popup.ts

@@ -180,6 +180,8 @@ export interface PopupProperties extends Properties {
   useDefaultToolbarButtons?: boolean;
 
   useFlatToolbarButtons?: boolean;
+
+  _ignoreCloseOnChildEscape?: boolean;
 }
 
 class Popup<
@@ -227,18 +229,19 @@ class Popup<
   }
 
   _keyboardHandler(options: KeyboardKeyDownEvent, onlyChildProcessing?: boolean): void {
-    if (!onlyChildProcessing) {
-      const e = options.originalEvent;
-      const $target = $(e.target);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { _ignoreCloseOnChildEscape } = this.option();
+    const e = options.originalEvent;
+    const $target = $(e.target);
 
-      if (this._$content && !$target.is(this._$content)
+    if (this._$content && !$target.is(this._$content)
         && options.keyName === ESC_KEY_NAME
-        && !e.isDefaultPrevented()) {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this.hide();
+        && !e.isDefaultPrevented()
+        && !_ignoreCloseOnChildEscape) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.hide();
 
-        return;
-      }
+      return;
     }
 
     super._keyboardHandler(options, onlyChildProcessing);

packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts

@@ -286,6 +286,7 @@ export default class DropDownMenu extends Widget<DropDownMenuProperties> {
       showTitle: false,
       fullScreen: false,
       ignoreChildEvents: false,
+      _ignoreCloseOnChildEscape: true,
       _fixWrapperPosition: true,
     });
     this._popup.registerKeyHandler('space', (

packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js

@@ -2714,6 +2714,17 @@ QUnit.module('keyboard navigation', {
 
         assert.strictEqual(this.popup.option('visible'), true, 'popup remains visible after pressing esc on a child element that prevents default');
     });
+
+    QUnit.test('should remain visible when child element presses escape and _ignoreCloseOnChildEscape is true', function(assert) {
+        this.init({ dragEnabled: false, _ignoreCloseOnChildEscape: true });
+
+        const $input = $('<input>').appendTo(this.popup.$content());
+        const keyboard = keyboardMock($input);
+
+        keyboard.keyDown('esc');
+
+        assert.strictEqual(this.popup.option('visible'), true, 'popup remains visible when _closeOnChildEscape is false');
+    });
 });
 
 QUnit.module('rendering', {