Skip to content

[EuiPopover] Should unmount immediately on parent unmount #4265

@dej611

Description

@dej611

In lens we have a layout with a flyout with a Drag and Drop are where a Popover can be toggled.
In order to handle automatic close of both flyout and popover there are 2 active EuiOutsideClickDetector which make sure both close on user click.

popover_closing_slow

While the flyout disappear immediately, the popover has a nice fadeout animation which leads to a visual glitch in this scenario (see top left on flyout close), as its parent component gets unmounted before such animation is completed:

popover_closing_slow_shadow

Because of this behaviour, the draggable element which is triggering the popover gets still referenced leading beautiful dnd to show a warning + error messages in the console:

Screenshot 2020-11-16 at 10 18 52

I know it's a bit tricky scenarios, but it is currently implemented in Lens.
The only feasible solution found from the EUI outside world would be to wait a bit until the popover animation is completed before closing the flyout, but as suggested in the comment that solution is a bit flacky and it would be better to be addressed at the EUI level.

One proposed solution would be to immediately stop the animation and unmount the popover if it detect the parent component gets unmounted.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions