Popup: Close popup on Escape key press when focus is inside a child editor

[r-farkhutdinov]

No description provided.

[Copilot]

Pull request overview

Fixes Popup keyboard behavior so pressing Escape closes the popup even when focus is inside a child element/editor (where ignoreChildEvents would otherwise prevent the Overlay-level Escape handler from running).

Changes:

• Add a Popup._keyboardHandler override to close on Escape when the keydown originates from a child element inside the popup content.
• Add a QUnit regression test covering Escape pressed on a child <input> element.
• Add a React Storybook scenario demonstrating Escape behavior with editors inside a Popup.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js	Adds a regression test ensuring Escape closes the popup when focus is on a child element.
packages/devextreme/js/__internal/ui/popup/m_popup.ts	Implements Escape handling for keydown events originating from child elements within the popup content.
apps/react-storybook/stories/popup/data.ts	Provides sample data for the new Popup Storybook story.
apps/react-storybook/stories/popup/Popup.stories.tsx	Adds a Storybook example demonstrating Escape-to-close when focus is inside embedded editors.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

This PR adjusts dxPopup keyboard handling so that pressing Escape closes the popup even when focus is inside a child editor/element (instead of only when the popup content element itself is the event target). It also adds regression tests and a React Storybook example to demonstrate the behavior.

Changes:

• Add Popup._keyboardHandler override to close on Escape when the keydown originates from a child element inside popup content (unless preventDefault() was called).
• Add QUnit coverage for Escape behavior when focus is on a child element, including a preventDefault() scenario.
• Add a React Storybook story demonstrating Escape handling with editors inside a popup.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/devextreme/js/__internal/ui/popup/m_popup.ts	Overrides keyboard handling to close popup on Escape from child elements, with a preventDefault() escape hatch.
packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js	Adds QUnit tests validating Escape closes popup from a child element and respects preventDefault().
apps/react-storybook/stories/popup/data.ts	Provides sample data for the new popup story.
apps/react-storybook/stories/popup/Popup.stories.tsx	Adds a Storybook scenario demonstrating Escape handling with TextBox/SelectBox/DateBox inside Popup.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

This PR updates DevExtreme’s internal Popup keyboard handling so that pressing Escape closes the popup even when focus is inside a child editor/element (not just on the popup content root), while adding an internal escape-ignore flag for specific popups that must preserve existing nested-escape behavior.

Changes:

• Add Popup._keyboardHandler override to close on Escape when the event target is a child element.
• Introduce internal _ignoreCloseOnChildEscape option and enable it for toolbar overflow menu and grid column chooser popups.
• Add QUnit coverage and a React Storybook scenario for Escape handling inside editors.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js	Adds regression tests for Escape behavior when focus is on a child element, including preventDefault and ignore-flag scenarios.
packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts	Sets _ignoreCloseOnChildEscape: true to preserve “Escape on nested items should NOT close popup” behavior in the toolbar overflow menu.
packages/devextreme/js/__internal/ui/popup/m_popup.ts	Implements new Escape-from-child close behavior and introduces _ignoreCloseOnChildEscape.
packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts	Sets _ignoreCloseOnChildEscape: true for the column chooser popup to preserve prior Escape behavior for nested focus targets.
apps/react-storybook/stories/popup/data.ts	Adds demo data for the new Popup Storybook story.
apps/react-storybook/stories/popup/Popup.stories.tsx	Adds a Storybook example demonstrating Escape closing the popup from inside editors.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

This PR updates the core Popup keyboard handling so pressing Escape closes the popup even when focus is inside a child element (e.g., an embedded editor), with opt-outs for specific internal popup usages.

Changes:

• Add Popup-level handling for Escape keydown events originating from child elements, with a private opt-out flag.
• Add QUnit coverage for closing / preventDefault behavior / opt-out behavior.
• Add a React Storybook example demonstrating Escape behavior from editors inside a Popup.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js	Adds keyboard navigation tests covering Escape behavior when focus is inside child elements.
packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts	Sets _ignoreCloseOnChildEscape: true for the toolbar dropdown menu popup to preserve its Escape behavior.
packages/devextreme/js/__internal/ui/popup/m_popup.ts	Overrides _keyboardHandler to close on child-originated Escape and introduces _ignoreCloseOnChildEscape.
packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts	Sets _ignoreCloseOnChildEscape: true for the column chooser popup.
apps/react-storybook/stories/popup/data.ts	Adds sample data for the new Popup Storybook story.
apps/react-storybook/stories/popup/Popup.stories.tsx	Adds a Storybook story demonstrating Escape closing behavior from child editors.

---

You can also share your feedback on Copilot code review. Take the survey.

[marker-dao]

We should set a default value for this property as well, just as we do for all the others.

[marker-dao]

Resolved 002c48d

[Copilot]

Pull request overview

This PR updates the internal dxPopup keyboard handling so that pressing Escape closes the popup even when focus is inside a nested child element/editor, while providing an internal opt-out for components that have custom Escape behavior.

Changes:

• Added Popup._keyboardHandler logic to close on Escape when the event target is a child element (unless prevented or explicitly ignored).
• Introduced a private option _ignoreCloseOnChildEscape (default false) and enabled it for internal popups that should preserve existing Escape behavior (e.g., toolbar overflow menu, column chooser).
• Added QUnit coverage for child-focus Escape closing, preventDefault() behavior, and the opt-out flag; added a React Storybook example to manually verify editor-focused Escape behavior.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js	Adds regression tests for Escape handling when focus is inside child elements, including preventDefault and opt-out behavior.
packages/devextreme/js/__internal/ui/popup/m_popup.ts	Implements “Escape from child closes popup” behavior and introduces _ignoreCloseOnChildEscape option.
packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts	Sets _ignoreCloseOnChildEscape: true to preserve toolbar menu’s custom Escape behavior.
packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts	Sets _ignoreCloseOnChildEscape: true for the column chooser popup to avoid changing Escape behavior there.
apps/react-storybook/stories/popup/data.ts	Adds sample data used by the new Popup story.
apps/react-storybook/stories/popup/Popup.stories.tsx	Adds a Storybook scenario demonstrating Escape behavior when focus is inside embedded editors.