[LWC] Alignment of Month and Year editors in DatePicker (cell editor)

[gbrdhvndi]

Hello there!

I have started evaluating the latest beta version of the Grid (4.1.0-beta-2) and had to remove all my overrides which were using the getLWCElement() function because it no longer exists. One of those overrides was fixing a rather annoying issue with date picker's month and year editor alignment.

The problem was that the editors were incorrectly positioned which made them invisible to the user and thus impossible to operate. This was happening because the alignment routine was relying on the document's body height, which is always 0 in Lightning Experience.

Turns out, this issue is mostly resolved in the new version of the product. However, there are still instances when it occurs. For example, when the Grid's host component is placed below other components on the page and the user has to scroll down to reveal it. The attached animated screenshot illustrates the problem.

converted.gif (403.44 KiB) Viewed 909 times

I did some quick debugging but unfortunately was unable to pinpoint the exact place where things start going wrong. From the screenshot it is apparent that it is related to the scroll offset. It seems like the editor is stopped as soon as it reaches the invisible bottom of the screen which has been shifted up.

Note the lower edge of buttons in the background. Here is this page in the initial scroll state, those buttons are nearly at the bottom of the screen. There is certainly a connection.

Screenshot 2021-03-04 at 01.57.02.png (249.37 KiB) Viewed 909 times

I can provide additional information upon request.

Thank you!

P.S.
Would be awesome if this was resolved in the final release.

[Maxim Gorkovsky]

Hello Aleksei,

all my overrides which were using the getLWCElement() function because it no longer exists

getLWCElement was used mostly to provide listener target and active element for the library. So you can use DomHelper.getRootElement(element) to get output similar togetLWCElement. And there is DomHelper.getActiveElement(element) to return current active element inside the lightning web component. I don't know much about your overrides and what they fixed, but probably you can return them back if you need with these new functions.

Regarding issue on the .gif, I cannot reproduce this behavior. I added a bunch of grid components to a lightning page, scrolled to the last of them, opened date picker and tried to scroll the view. As far as I see, popup is aligned just fine

scrolllwc.gif (16.11 MiB) Viewed 903 times

I noticed your date picker looks a bit different, native to salesforce environment. Month dropdown looks like its position is not controlled by the calendar picker, which could probably be affected by custom styling. I can suggest to try same with a default theme (like stockholm) and see if issue is still present.

[gbrdhvndi]

Maxim, I have just tried with Stockholm but the problem persists.

Screen Recording.gif (12.53 MiB) Viewed 900 times

It seem to be happening at a certain scroll position and depends on the browser screen size.

P.S.
I've tried DomHelper.getRootElement() and it works just fine instead of the getLWCElement().
This override, however, is for a different issue: grid header menu position in a modal dialog.

[Maxim Gorkovsky]

I can see this issue now with even bigger scroll position. I've opened ticket to track it: https://github.com/bryntum/support/issues/2486 Thank you for report!

I recall this issue in pre 4.1.0 release as mentioned here: viewtopic.php?t=16503
Looks like a regression.

[Maxim Gorkovsky]

Hi Aleksei,
we found a solution which works on our environment, could you please try it on your end too?

Override.apply(class {
    static get() {
        return {
            target : Rectangle
        };
    }

    static from(element, relativeTo, ignorePageScroll) {
        if (element instanceof Rectangle) {
            return element;
        }
        if (ignorePageScroll === undefined && typeof relativeTo === 'boolean') {
            ignorePageScroll = relativeTo;
            relativeTo = null;
        }
        if (relativeTo) {
            let { scrollLeft, scrollTop } = relativeTo;
            if ((BrowserHelper.isEdge || BrowserHelper.isSafari) && relativeTo === document.body) {
                scrollLeft = scrollTop = 0;
            }
            relativeTo = Rectangle.from(relativeTo).translate(-scrollLeft, -scrollTop);
        }
        else {
            relativeTo = zeroBased;
        }
        const
            isViewport   = element === document || element === window,
            isSFViewport = element === document.body && document.body.offsetHeight === 0,
            sfElRect     = isSFViewport && element.getBoundingClientRect(),
            viewRect     = isSFViewport
                ? new Rectangle(sfElRect.left, sfElRect.top, sfElRect.width, document.body.parentElement.scrollHeight)
                : isViewport
                    ? new Rectangle(0, 0, window.innerWidth, window.innerHeight)
                    : element.getBoundingClientRect(),
            scrollOffset = (ignorePageScroll || isViewport) ? [0, 0] : [window.pageXOffset, window.pageYOffset];

        let scaleX = 0,
            scaleY = 0;

        if (BrowserHelper.isIE11 || BrowserHelper.isEdge && element.namespaceURI?.match(/svg/)) {
            scaleX = element.dataset?.scaleX || 0;
            scaleY = element.dataset?.scaleY || 0;
        }
        return new Rectangle(
            viewRect.left + scrollOffset[0] - relativeTo.x + scaleX / 2,
            viewRect.top + scrollOffset[1] - relativeTo.y + scaleY / 2,
            viewRect.width - scaleX,
            viewRect.height - scaleY
        );
    }
});

[gbrdhvndi]

Hi Maxim, sorry for late response.

Yes, your solution seems to be working fine.

Many thanks!