SuperDatePicker date popover EuiTabs not firing TransitionEnd event properly

elastic / eui

Elastic UI Framework 🙌

https://eui.elastic.co/

Other

54 stars 841 forks source link

SuperDatePicker date popover EuiTabs not firing TransitionEnd event properly #2403

Closed adekau closed 5 years ago

adekau commented 5 years ago

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: eui_bug

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 commented 5 years ago

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.

popover focus

thompsongl commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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