[LWC] Error when click outside grid

[dsingh7]

Browser - Chrome Version 121.0.6167.185
LWS - disabled

[alex.l]

Hi,

Could you please test with this template ?

<template>
    <div>
        <lightning-button variant="brand" label="Action"  ></lightning-button>
    </div>
    <div class="container" lwc:dom="manual"></div>
</template>

Or send us a complete file with your template to check, if it has different structure. I am not sure what did you mean as parent/child in your template snippets, not sure 100% how it should looks like. I see that as the only difference via my and your versions.

[gbrdhvndi]

Looks like one final null check is missing after calling getRootNode().

This is the current version:

class DomHelperOverrideActiveElement {
    static get target() {
        return {
            class : DomHelper
        };
    }
    static getActiveElement(element) {
        if (element?.isWidget) {
            element = element.element;
        }
        return element?.getRootNode?.().activeElement;
    }
}

And here is the corrected version:

class DomHelperOverrideActiveElement {
    static get target() {
        return {
            class : DomHelper
        };
    }
    static getActiveElement(element) {
        if (element?.isWidget) {
            element = element.element;
        }
        return element?.getRootNode?.()?.activeElement;
    }
}

[dsingh7]

Thanks Man,
you got it. in which version I will get this fix??

[alex.l]

Hi,

Aleksei, thanks for sharing the fix!

dsingh7,
Aleksei is not from our company, he is a client who shared a fix with you. You can apply the fix by your own or wait until https://github.com/bryntum/support/issues/8652 is fixed.
You can subscribe on ticket updates to be notified when it's done.

[gbrdhvndi]

No problem Alex,

I can share a small patch for another override, too. It's for DomHelper.getVisibleViewport() which is in DomHelperOverrideIsInView.js. We have found a few situations where it also errors with a null exception and results in incorrectly positioned floating widgets (tooltips, dialogs), so we added more null checks in our own override which looks like this:

import { Override, DomHelper, Rectangle } from '@bryntum/core-thin';

{
    const scrollStyles = {
        auto: 1,
        scroll: 1,
    };  

    const isScrollable = (style) => {
        return scrollStyles[style?.overflowX] || scrollStyles[style?.overflowY];
    };  

    const getComputedStyle = (node) => {
        return node?.ownerDocument?.defaultView?.getComputedStyle(node);
    };  

    const getParent = (node) => {
        const result = node.ownerSVGElement?.parentNode || node.parentNode || node.target;  

        return (result == null ? undefined : result.nodeType) === Node.DOCUMENT_FRAGMENT_NODE ? result.host : result;
    };  

    const { body } = document;  

    class DomHelperOverride {
        static get target() {
            return {
                class: DomHelper,
            };
        }  

        /**
         * Fixes BRLIB-653
         */
        static getVisibleViewport(startElement, docRect, targetEl) {
            const viewports = [];
            let result = docRect;  

            for (let viewport = startElement; viewport && viewport !== body; viewport = getParent(viewport)) {
                const style = getComputedStyle(viewport);  

                if (isScrollable(style) && style?.display !== 'contents') {
                    viewports.unshift(Rectangle.client(viewport, null, true, true, targetEl));
                }
            }  

            for (let i = 0, { length } = viewports; result && i < length; i++) {
                result = result.intersect(viewports[i]);
            }  

            return result;
        }
    }  

    Override.apply(DomHelperOverride);
}

[gbrdhvndi]

Oh, and looks like there's someone else that can benefit from the getVisibleViewport patch:

viewtopic.php?t=28169

[alex.l]

Thank you for your help! Very appreciated! I will let him know.

[Maxim Gorkovsky]

Hello,
Your problem might be caused by the fact first child of the LWC is not a grid container. If you move button below, component should be working fine:

<template>
    <div class="container" lwc:dom="manual"></div>
    <div>
        <lightning-button variant="brand" label="Action"  ></lightning-button>
    </div>
</template>

You can override getRootElement to use a selector instead:

Override.apply(class {
    static target = { class: DomHelper }

    static getRootElement(element) {
        const root = element.getRootNode?.();

        return root?.body || root?.querySelector('.container') || root?.firstChild || root || element.ownerDocument.body;
    }
});