diff --git a/CHANGELOG.md b/CHANGELOG.md index 233c1aa843c..c3be2bc5083 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Fixed `EuiToolTip` closing during initial positioning period ([#4327](https://github.com/elastic/eui/pull/4327)) - Added `!default` to SASS variables of `EuiCollapsibleNav` ([#4335](https://github.com/elastic/eui/pull/4335)) - Fixed `EuiDataGrid` column property `displayAsText`. Column headers prefer `displayAsText` over `id`; `display` still takes precedence. If provided, the filter in the sort-popover will search against `displayAsText` instead of `id`. ([#4351](https://github.com/elastic/eui/pull/4351)) +- Fixed propagation of `esc` key presses closing parent popovers ([#4336](https://github.com/elastic/eui/pull/4336)) **Theme: Amsterdam** diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index ebe581b1ce7..edd0461d50a 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -616,8 +616,11 @@ export class EuiComboBox extends Component< break; case keys.ESCAPE: - event.stopPropagation(); - this.closeList(); + if (this.state.isListOpen) { + event.preventDefault(); + event.stopPropagation(); + this.closeList(); + } break; case keys.ENTER: diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 10d9261df40..f2ca25ba195 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -362,9 +362,17 @@ export class EuiPopover extends Component { } }; + onEscapeKey = (event: Event) => { + if (this.props.isOpen) { + event.preventDefault(); + event.stopPropagation(); + this.closePopover(); + } + }; + onKeyDown = (event: KeyboardEvent) => { if (event.key === cascadingMenuKeys.ESCAPE) { - this.closePopover(); + this.onEscapeKey((event as unknown) as Event); } }; @@ -724,7 +732,7 @@ export class EuiPopover extends Component { initialFocus={initialFocus} onDeactivation={onTrapDeactivation} onClickOutside={this.onClickOutside} - onEscapeKey={this.closePopover} + onEscapeKey={this.onEscapeKey} disabled={ !ownFocus || !this.state.isOpenStable || this.state.isClosing }>