fix(Datepicker): unexpected close on calendar interaction

[gselderslaghs]

Proposed changes

This fixes a bug where the display plugin closes on calendar interaction when the calendar has to be redrawn, the redraw function causes the clicked element not to be found, adding a timeout on the draw method fixes the issue

Types of changes

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

• I have read the CONTRIBUTING document.
• My commit messages follows the conventional commit format
• My change requires a change to the documentation, and updated it accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[wuda-io]

can we solve this without using a timeout?

[gselderslaghs]

I've been working on this lately, it turned out a bit more a complex use-case since the calendar redraws on interaction, as a result the clicked element is already overwritten by the calendar draw method and the display plugin did not recognizes the clicked element as a child element of the calendar component

This all had to do with JavaScript event propagation: bubbling vs capture

Excerpt from this W3 schools article:

In bubbling the inner most element's event is handled first and then the outer: the <p> element's click event is handled first, then the <div> element's click event.

In capturing the outer most element's event is handled first and then the inner: the <div> element's click event will be handled first, then the <p> element's click event.

Since the default JavaScript event propagation is bubbling, the calendar event handlers where executed first because being the most inner DOM elements, changing the propagation for the display plugin implementations to capturing solved this issue

[wuda-io]

So you added the files here 😂 We should find a better solution for displaying stuff on top (modal) or next to each other. We should use a single component like PopperJs or a custom made Class which uses popover methods. Also I like the storybooks approach for development. I will take a look later in depth.

[gselderslaghs]

So you added the files here

I did and updated accordingly, can you review the fix?