Popover doesn't work in modal

[flash1293]

Elements inside a popover are not clickable if the popover resides inside a modal.

<EuiModal>
  <EuiModalBody>
    <EuiPopover
      button={<button>My Button</button>}
      isOpen={true}
      repositionOnScroll
    >
      <button onClick={() => {alert('test'); /* won't fire */}}>Click me</button>
    </EuiPopover>
  </EuiModalBody>
</EuiModal>

It works fine if the popover is used directly on the page.

[timroes]

@cchaos that's a bit critical for us at the moment, since we would need the dialog in elastic/kibana#31400 to show the filters in the "new vis / choose source". Since that PR is critical for the Geo team, to be able to add Maps to dashboards, I wondered, if it would be possible, you could raise this issue somehow to urgent?

[timroes]

The issue - as far as I see it - is btw caused by multiple OutsideClick detectors who are conflicting with each other. So the modal's OutsideClickDetector actually catches the click inside the popover (even though that's part of the modal).

[cchaos]

I'm not as familiar with the focus trap/portal stuff, but I know that canvas is using a popover in a modal. So there must just be an extra setting needed?

[snide]

Think This was fixed in 7.2 with the new focus trap stuff. it will go in once we upgrade Kibana later today. Can check it then.

[thompsongl]

@timroes What @snide said is accurate. Better portal support was recently added.
FWIW, here's your test case reproduced in our docs environment with the latest EUI:

[timroes]

Awesome @snide thanks for the quick feedback.