refactor: ensure Lit month calendars are rendered synchronously (#8220)

vaadin · Nov 25, 2024 · d954c55 · d954c55
1 parent 5163e29
commit d954c55
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js b/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js
@@ -57,6 +57,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
         initialPosition: {
           type: Object,
           observer: '_initialPositionChanged',
+          sync: true,
         },
 
         _originDate: {

diff --git a/packages/date-picker/src/vaadin-infinite-scroller.js b/packages/date-picker/src/vaadin-infinite-scroller.js
@@ -201,6 +201,21 @@ export class InfiniteScroller extends HTMLElement {
     }
   }
 
+  /** @protected */
+  disconnectedCallback() {
+    if (this._debouncerScrollFinish) {
+      this._debouncerScrollFinish.cancel();
+    }
+
+    if (this._debouncerUpdateClones) {
+      this._debouncerUpdateClones.cancel();
+    }
+
+    if (this.__pendingFinishInit) {
+      cancelAnimationFrame(this.__pendingFinishInit);
+    }
+  }
+
   /**
    * Force the scroller to update clones after a reset, without
    * waiting for the debouncer to resolve.
@@ -348,8 +363,9 @@ export class InfiniteScroller extends HTMLElement {
       }
     });
 
-    requestAnimationFrame(() => {
+    this.__pendingFinishInit = requestAnimationFrame(() => {
       this._finishInit();
+      this.__pendingFinishInit = null;
     });
   }
 
@@ -364,6 +380,10 @@ export class InfiniteScroller extends HTMLElement {
     itemWrapper.instance = this._createElement();
     itemWrapper.appendChild(itemWrapper.instance);
 
+    if (itemWrapper.instance.performUpdate) {
+      itemWrapper.instance.performUpdate();
+    }
+
     Object.keys(tmpInstance).forEach((prop) => {
       itemWrapper.instance[prop] = tmpInstance[prop];
     });