[EuiPopover] Bug with ownFocus when closing the popover

[kertal]

When you have several elements that can trigger a EuiPopover, open a popover one after each other with a mouseclick, always the first element that triggered the EuiPopover gains focus when one of the follow up popover closes. This can lead to flickering when e.g. the first element displays additional elements onFocus, here's the example of elastic/kibana#75749

This only happens in chrome and as @Dosant noted:

I don't think this is a native behaviour.
Looks like focus locking and returning is handled by: react-focus-lock under the EUI hood https://github.com/theKashey/react-focus-lock#unmounting-and-focus-management

With that in mind, I guess there is a way for EUI popover to expose more granular apis for handling focus locking

If there was a way to improve this behavior, the workaround of elastic/kibana#75749, assigning focus to the clicked element, should be reverted .

[cchaos]

I'm going to make this a high priority. I've been noticing this for a long time in or docs and has frustrated me just never got around to making an issue for it.

[chandlerprall]

Results from digging:

This appears to be an issue from our wrapping of the popover contents with EuiOutsideClickDetector. Disabling does not solve the issue outright, however.

When EuiOutsideClickDetector is enabled, clicking one a second anchor button shifts the focus back to the first, then focus-lock saves a reference to the active element (first button) and will return focus there on close.

Without EuiOutsideClickDetector, when focus-lock looks for the active element it gets the open popover's focus locked element. When closing, it tries to shift focus back to the popover content which is no longer on the page, so focus goes to the body.

Looking into the right way to resolve.

[chandlerprall]

I've got a branch that shifts our on-click-outside & on-escape-key handling into the focus-lock lib itself, which cleans up our code & fixes the initial issue. Now looking into the issue where the lock saves a reference to the previous popover's content as the active element instead of the anchor button.