Browser - Chrome Version 121.0.6167.185
LWS - disabled
Support Forum
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.
All the best,
Alex
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;
}
}
Aleksei
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.
All the best,
Alex
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);
}
Aleksei
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;
}
});