PolymerLabs
lit-virtualizer repeated use with LitElement - adds scroll window event listener more than once
In a LitElement component - render method:
render() { return html<lit-virtualizer .items=${items} .renderItem=${this.listitem}>; }
keeps adding:
A potential solution - seems to work but a bit "hacky" - VirtualScroller.js set container(container) method:
this._containerRO.disconnect();
this._containerSize = null;
if (oldEl) {
if (this._containerInlineStyle) {
oldEl.setAttribute('style', this._containerInlineStyle);
}
else {
oldEl.removeAttribute('style');
}
this._containerInlineStyle = null;
if (oldEl === this._scrollTarget) {
oldEl.removeEventListener('scroll', this, { passive: true });
this._sizer && this._sizer.remove();
}
}
else {
if (!window.scrollLitVirtual) {
console.log('window.scrollLitVirtual setting scroll on window once');
addEventListener('scroll', this, { passive: true });
window.scrollLitVirtual = true;
}
// First time container was setup, add listeners only now.
}
if (!window.scrollLitVirtual) { is the condition added to avoid continous scroll event listeners to be added. I have tried several ways to capture the window.scroll event on DisconnectedCallBack on the Lit-Element etc. but maybe because of the "this" handler reference - it is impossible (for me at least) to figure out a way to get rid of the event listeners no longer relevant. For whatever reason the garbage collection is not picking these up. It might be related to the way I switch between lit-element controls ... but maybe it is an issue for others too. I have tried just using the scroll directive - but it is the same issue also using the directive.
Anyone with the same issue? or a better way to avoid the hack?
Hi, Are any updates planned to the lit-virtualizer in the short/medium term? eventually with a fix to above.
The code in this area has been significantly reworked, and I believe this issue should no longer occur. Please check against 0.7.0-pre.2 or later.
