[A11Y] Using nested `EuiPopover` in `EuiModal`: Pressing ESC in child component closes parent

Describe the problem

Pressing the ESC key within a child component nested inside an EuiPopover unexpectedly closes the parent EuiModal.

Steps to Reproduce:

Open an EuiModal component.
Open an EuiPopover component within the EuiModal.
Focus on the EuiPopover component.
Press the ESC key.

Expected Result:

EuiModal should remain open.

Actual Result:

Pressing the ESC key closes the parent EuiModal.

Additional Information:

Some components we have manual Escape window keydown listeners and some components we rely on our underlying focus trap library :grimacing: the resolution might be as easy as stop-propagation (hopefully), or it might be as difficult as creating a global Escape listener queue somewhere

Test code:

import React, { useState } from 'react';
import {
  EuiPopover,
  EuiPopoverTitle,
  EuiFilterGroup,
  EuiFilterButton,
  EuiSelectable,
  EuiButton,
  EuiModal,
  EuiModalBody,
  EuiModalHeader,
  EuiModalHeaderTitle,
  useGeneratedHtmlId,
} from '@elastic/eui';

export const Demo = () => {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);

  const onButtonClick = () => {
    setIsPopoverOpen(!isPopoverOpen);
  };

  const filterGroupPopoverId = useGeneratedHtmlId({
    prefix: 'filterGroupPopover',
  });

  const [items, setItems] = useState([
    { label: 'Johann Sebastian Bach', checked: 'on' },
    { label: 'Wolfgang Amadeus Mozart', checked: 'on' },
    { label: 'Antonín Dvořák', checked: 'off' },
    { label: 'Dmitri Shostakovich' },
    { label: 'Felix Mendelssohn-Bartholdy' },
    { label: 'Franz Liszt' },
    { label: 'Franz Schubert' },
    { label: 'Frédéric Chopin' },
    { label: 'Georg Friedrich Händel' },
    { label: 'Giuseppe Verdi' },
  ]);

  const button = (
    <EuiFilterButton
      iconType="arrowDown"
      badgeColor="success"
      onClick={onButtonClick}
      isSelected={isPopoverOpen}
      numFilters={items.filter((item) => item.checked !== 'off').length}
      hasActiveFilters={!!items.find((item) => item.checked === 'on')}
      numActiveFilters={items.filter((item) => item.checked === 'on').length}
    >
      Composers
    </EuiFilterButton>
  );

  return (
    <>
      <EuiButton
        onClick={() => {
          setIsPopoverOpen(false);
          setIsModalVisible(true);
        }}
      >
        Show modal
      </EuiButton>

      {isModalVisible && (
        <EuiModal onClose={() => setIsModalVisible(false)}>
          <EuiModalHeader>
            <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
          </EuiModalHeader>

          <EuiModalBody>
            <EuiFilterGroup>
              <EuiPopover
                id={filterGroupPopoverId}
                button={button}
                isOpen={isPopoverOpen}
                closePopover={() => {
                  setIsPopoverOpen(false);
                }}
                panelPaddingSize="none"
              >
                <EuiSelectable
                  allowExclusions
                  searchable
                  searchProps={{
                    placeholder: 'Filter list',
                    compressed: true,
                  }}
                  aria-label="Composers"
                  options={items}
                  onChange={(newOptions) => setItems(newOptions)}
                  loadingMessage="Loading filters"
                  emptyMessage="No filters available"
                  noMatchesMessage="No filters found"
                >
                  {(list, search) => (
                    <div style={{ width: 300 }}>
                      <EuiPopoverTitle paddingSize="s">
                        {search}
                      </EuiPopoverTitle>
                      {list}
                    </div>
                  )}
                </EuiSelectable>
              </EuiPopover>
            </EuiFilterGroup>
          </EuiModalBody>
        </EuiModal>
      )}
    </>
  );
};

elastic / eui

[A11Y] Using nested `EuiPopover` in `EuiModal`: Pressing ESC in child component closes parent #7879