[EuiSuperDatePicker] closes the Minutes ago select box before I can select anything

[LeeDr]

On the latest 7.0.0-SNAPSHOT build from today, using Firefox browser on Windows 10.

When I open the [Metricbeat System] Overview dashboard and then try to change the Minutes ago to Hours ago by clicking the arrow on that pulldown menu, it instantly closes. I found that if I can keep the mouse very still near that arrow it stays open, but if I move to select anything it closes.

It seems like maybe its caused by making a selection and not applying it with the Update button?

I also notice the timestamp shown just below that pulldown menu updating every time I click it.

[chandlerprall]

I can reproduce with Firefox on Mac, in the EUI docs - if you switch from the Absolute tab to Relative and quickly open the dropdown, the dropdown auto-closes when the tooltip is removed. There is a flash of a scrollbar on the left docs navigation so it appears to be related to a more page-level layout event.

[chandlerprall]

Removing document.body.classList.add('euiBody-hasPortalContent'); line from tool_tip_popover.js avoids the issue. This class adds position: relative to the body element and appears to close any open select boxes in FF.

[Anupam-dagar]

I was able to reproduce the issue with Firefox Browser on Ubuntu 18.04. The dropdown was closing as soon as the tooltip disappeared. Although I wasn't able to observe the flash of scrollbar on the left navigation bar.
I have opened #2901 with the change suggested by @chandlerprall in the comment above.

[hetanthakkar]

is anyone working on this issue? @chandlerprall @Anupam-dagar

[Anupam-dagar]

@hetanthakkar1 there is a PR currently under review for this.

[hetanthakkar]

@Anupam-dagar okay mate

[cchaos]

I have investigated this further and I see now that it's during this state, where the date selection popover and the "Click to update" tooltip are shown.

I was worried that all FF users couldn't change this select box, but it's only a brief moment that these two collide. Once the tooltip disappears (a few seconds) the select box is selectable again.

That said, there is currently a PR open that will fix this in a kind of a round about way. #3127 will ensure the tooltip doesn't show until after the popover closes. This should eliminate the collision of the tooltip with the select.

[cchaos]

I just checked #3127 in Firefox and it does fix this issue in particular, but then there's still the other issue of #2490 (two clicks needed to interact with inputs) which isn't specific to Firefox.