[Lens] Improve popover behavior

[flash1293]

Some popovers, like the field item popover, are not easily closeable. It feels buggy, but the solution is not totally obvious. Some options might be:

• Provide a close button in an obvious place
• Change the position of the field info popover so it overlaps less
• Selectively make parts of the UI into "close" targets
• Make the entire background a click target while the field info popover is open
• Improve keyboard handling, or blur handling

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[wylieconlon]

@cchaos this was originally written down in 7.5. Do you have a preference for one of these potential workarounds?

[cchaos]

Can someone show an example of this "bugginess"? There's nothing extra added to the typical EuiPopover component and we haven't hadn't any complaints like this before, so I'm just struggling to understand what is happening.

What should be happening is the button that triggers the popover should also close it (should be a toggle button). When the popover is open, clicking anywhere outside of the popover should close it. Is this not what is happening?

[wylieconlon]

@cchaos Because Lens has so many clickable areas, the behavior that can happen is that the user clicks outside the popover onto another clickable thing, which opens something new.

[gose]

I often click on a field to see what values are in it, decide “yeah, that’s worth plotting” and then drag it over. The popover doesn’t auto-close when I do that, nor when I click on the general page. I have to explicitly go back and click on the field to get the popover to close.

Screen.Recording.2021-03-26.at.6.47.25.AM.mov

And another where the popover persists when scrolling:

another.mov

Here's another example where a user starts interacting with settings and viz types with the popover persisting:

more.mov

[cchaos]

Thanks @gose for those examples. One has an easy fix, the other, not so much.

1. The repositioning in the scrolling area is something we've been needing to address in EUI. This happens in flyouts and any other scrollable container because the Popovers are portalled (added to the end of the DOM) and fixed position against the trigger. EUI can only know if the whole window is scrolled which we do with repositionOnScroll but we can't know if there's a second container scroll.

The best solution is to add a scroll event listener and just force close all popovers when it's triggered.

2. The second one has to do with the fact that EuiPopover only closes onClick so the drag event isn't going through that full life cycle of mouse events. Since the drag even is custom by Lens, just call the close event when the drag starts.

---

Lens has so many clickable areas, the behavior that can happen is that the user clicks outside the popover onto another clickable thing, which opens something new.

I think this should be better now. We did do some recent work with EuiPopover and the handling of ensuring that even clicking on outside interact-able elements will close the popover. But let me know if this is not the case, and the specific instance.

[stratoula]

I m closing this as it doesnt seem relevant anymore