Could anyone shed some light on what might be causing the issue described below? Your insights are greatly appreciated. The problem lies within the line of code: clone = thead.cloneNode(true);
The error message reads: 'Type 'Node' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 227 more.'
In addition, I am encountering a problem with:
Cannot read properties of null (reading 'getBoundingClientRect')My development environment involves Angular, but due to specific requirements, I have to resort to manual JavaScript approaches.
#snippet of relevant code
let container = document.querySelector('#properties-content-left-container');
container.addEventListener("scroll", () => {
let filterChips = document.querySelector('#properties-filter-chips');
let filterChipsBB = filterChips.getBoundingClientRect();
let top = filterChipsBB.top + filterChipsBB.height;
let table = document.querySelector('#table') as HTMLElement | null;
let tableBB = table.getBoundingClientRect();
let thead = table.querySelector('thead:not(.temporary)') as HTMLElement | null;;
let gridContainer = document.querySelector('.grid-container');
let clone = table.querySelector('thead.temporary') as HTMLElement | null;
table.style.position = 'relative';
if (tableBB.top < top) {
if (thead.style.position != 'fixed') {
thead.style.position = 'fixed';
thead.style.top = top + 'px';
thead.style.width = (gridContainer ? gridContainer.clientWidth : table.clientWidth) + 'px';
thead.style.maxWidth = (gridContainer ? gridContainer.clientWidth : table.clientWidth) + 'px';
thead.style.overflowX = 'auto';
}
if (!clone) {
clone = thead.cloneNode(true);
clone.classList.add('temporary');
clone.style.opacity = '0';
clone.style.top = '0';
clone.style.position = 'sticky';
clone.style.width = 'auto';
clone.style.maxWidth = 'unset';
table.prepend(clone);
}