@vaadin/virtual-list 23.5.7 → 23.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/virtual-list",
-  "version": "23.5.7",
+  "version": "23.5.8",
   "publishConfig": {
     "access": "public"
   },
@@ -38,15 +38,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.5.7",
-    "@vaadin/lit-renderer": "~23.5.7",
-    "@vaadin/vaadin-lumo-styles": "~23.5.7",
-    "@vaadin/vaadin-material-styles": "~23.5.7",
-    "@vaadin/vaadin-themable-mixin": "~23.5.7"
+    "@vaadin/component-base": "~23.5.8",
+    "@vaadin/lit-renderer": "~23.5.8",
+    "@vaadin/vaadin-lumo-styles": "~23.5.8",
+    "@vaadin/vaadin-material-styles": "~23.5.8",
+    "@vaadin/vaadin-themable-mixin": "~23.5.8"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "~23.5.7",
+    "@vaadin/polymer-legacy-adapter": "~23.5.8",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "19efa292d13bc1052f0d2c15b19ebc2ebd3dc156"
+  "gitHead": "084fe61b2028ef2989c82623bff0255b2d62be55"
 }

package/src/vaadin-virtual-list.js

@@ -110,6 +110,11 @@ class VirtualList extends ElementMixin(ControllerMixin(ThemableMixin(PolymerElem
     return ['__itemsOrRendererChanged(items, renderer, __virtualizer)'];
   }
 
+  constructor() {
+    super();
+    this.__onDragStart = this.__onDragStart.bind(this);
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -128,6 +133,22 @@ class VirtualList extends ElementMixin(ControllerMixin(ThemableMixin(PolymerElem
     processTemplates(this);
   }
 
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    // Chromium based browsers cannot properly generate drag images for elements
+    // that have children with massive heights. This workaround prevents crashes
+    // and performance issues by excluding the items from the drag image.
+    // https://github.com/vaadin/web-components/issues/7985
+    document.addEventListener('dragstart', this.__onDragStart, { capture: true });
+  }
+
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('dragstart', this.__onDragStart, { capture: true });
+  }
+
   /**
    * Scroll to a specific index in the virtual list.
    *
@@ -179,6 +200,29 @@ class VirtualList extends ElementMixin(ControllerMixin(ThemableMixin(PolymerElem
     }
   }
 
+  /** @private */
+  __onDragStart(e) {
+    // The dragged element can be the element itself or a parent of the element
+    if (!e.target.contains(this)) {
+      return;
+    }
+    // The threshold value 20000 provides a buffer to both
+    //   - avoid the crash and the performance issues
+    //   - unnecessarily avoid excluding items from the drag image
+    if (this.$.items.offsetHeight > 20000) {
+      const initialItemsMaxHeight = this.$.items.style.maxHeight;
+      const initialVirtualListOverflow = this.style.overflow;
+      // Momentarily hides the items until the browser starts generating the
+      // drag image.
+      this.$.items.style.maxHeight = '0';
+      this.style.overflow = 'hidden';
+      requestAnimationFrame(() => {
+        this.$.items.style.maxHeight = initialItemsMaxHeight;
+        this.style.overflow = initialVirtualListOverflow;
+      });
+    }
+  }
+
   /**
    * Gets the index of the first visible item in the viewport.
    *

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/virtual-list",
-  "version": "23.5.7",
+  "version": "23.5.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/virtual-list",
-  "version": "23.5.7",
+  "version": "23.5.8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {