getBoundingClientRect() always fails the first time with 'undefined' error

[Avinodh]

Version

2.1.3

Test Environment

Google Chrome

Current Behavior

I am trying to configure custom popups for event creation. The following code sets up the event handler to listen on the selectDateTime event:

        this.calendarInstance.on('selectDateTime', (info) => {
            console.log(info.start + " - " + info.end);
            var gridElems = info.gridSelectionElements;
            console.log(gridElems[0].getBoundingClientRect());
        });

The first time I click the calendar, I get the following error:

However, any subsequent clicks seem to work. just fine (the below screenshot shows that the second click did in fact print the boundingRect DOM element):

My guess is that there is some sort of a race here between when the first event gets fired off and the DOM being ready. But why does this consistently happen on only the first click?

[adhrinae]

@Avinodh

You are correct, it is a bug caused by a race condition that occurs when selecting datetime by clicking on cells.

Unlike dragging, the calendar needs to determine whether it is a single or double click. Once the calendar recognizes the click interaction, it draws the selection element and re-renders. (code)

However, the gridSelectionElements refer to variables declared during the previous render phase, which is why the proper gridSelectionElements property cannot be obtained.

This may seem peculiar, but it is how React (the calendar uses Preact internally) works.

Resolving this issue would be pretty difficult. As a workaround, you can disable clicks through an option and only allow users to drag cells.

[Avinodh]

Thanks @adhrinae ! I'll look into disabling the click event, and just going with the drag behavior.

[adhrinae]

@Avinodh I'll leave this issue open since it's not resolved yet.