SuperDatePicker date popover EuiTabs not firing TransitionEnd event properly

[adekau]

When messing with the EuiSuperDatePicker demo page, I notice that occasionally the tabs when selecting a date range box do not highlight, which interrupts your clicks into a text field.

Here's a gif of it:

I'm having a bit of trouble pinning down exactly what is causing this. It seems pretty non-deterministic but it's especially common when switching between date range popovers.

It's a bit annoying because the transitionend event fires when you click inside the popover so it interrupts a click on an input field and you have to click again to start typing.

[chandlerprall]

Thank you for submitting this issue! I've found I can recreate this fairly reliably by opening the date selection popover and then double-clicking on the popover's anchor.

[thompsongl]

This is tricky. I spent a few minutes looking into it and it appears to be due to a combination of:

• 250ms setState timeout (https://github.com/elastic/eui/blob/master/src/components/popover/popover.tsx#L398-L402)
• that sometimes gets cancelled (e.g., well-timed double-click) (https://github.com/elastic/eui/blob/master/src/components/popover/popover.tsx#L350)
• which then prevents a rerender (and subsequent tab focus()) (https://github.com/elastic/eui/blob/master/src/components/popover/popover.tsx#L570)

Just noting some observations as I peel off of this for a bit. I'll circle back if no one else picks it up

[adekau]

I noticed this initially because I was trying to wrap this component as a web component for integration with an angular app. I figured I wasn't re-targeting the events correctly. This bug reproduces every time the popover is created when wrapped as a webcomponent for some reason.

https://github.com/potatofarms/reactwebcomponent/blob/master/src/app/eui-wc/eui-superdatepicker.webcomponent.ts

Not sure if that information is helpful or not. Thanks for your time looking into this!

[thompsongl]

Good news: I think this will be fixed when #2366 merges.
EuiPopover was the root of the problem (as noted in my previous comment), and this addition appears to resolve it.

[adekau]

Issue as described in OP appears to be fixed, but noticed another similar issue when testing on the demo page: #2490