fix: avoid content outside grid ending up in drag image (#8529)

vaadin · Jan 20, 2025 · 0c8fc5e · 0c8fc5e
1 parent 81e66cb
commit 0c8fc5e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 6 deletions.
diff --git a/packages/grid/src/vaadin-grid-drag-and-drop-mixin.js b/packages/grid/src/vaadin-grid-drag-and-drop-mixin.js
@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isChrome, isSafari } from '@vaadin/component-base/src/browser-utils.js';
 import {
   iterateChildren,
   iterateRowCells,
@@ -318,17 +319,43 @@ export const DragAndDropMixin = (superClass) =>
      * issues. To mitigate these issues, we hide the scroller element
      * when drag starts to remove it from the drag image.
      *
+     * Grids with fewer rows also have issues on Chromium and Safari
+     * where the drag image is not properly clipped and may include
+     * content outside the grid. Temporary inline styles are applied
+     * to mitigate this issue.
+     *
      * Related issues:
      * - https://github.com/vaadin/web-components/issues/7985
      * - https://issues.chromium.org/issues/383356871
+     * - https://github.com/vaadin/web-components/issues/8386
      *
      * @private
      */
     __onDocumentDragStart(e) {
-      if (e.target.contains(this) && this.$.table.scrollHeight > 20000) {
-        this.$.scroller.style.display = 'none';
+      if (e.target.contains(this)) {
+        // Record the original inline styles to restore them later
+        const elements = [e.target, this.$.items, this.$.scroller];
+        const originalInlineStyles = elements.map((element) => element.style.cssText);
+
+        // With a large number of rows, hide the scroller
+        if (this.$.table.scrollHeight > 20000) {
+          this.$.scroller.style.display = 'none';
+        }
+
+        // Workaround content outside the grid ending up in the drag image on Chromium
+        if (isChrome) {
+          e.target.style.willChange = 'transform';
+        }
+
+        // Workaround text content outside the grid ending up in the drag image on Safari
+        if (isSafari) {
+          this.$.items.style.flexShrink = 1;
+        }
+
         requestAnimationFrame(() => {
-          this.$.scroller.style.display = '';
+          elements.forEach((element, index) => {
+            element.style.cssText = originalInlineStyles[index];
+          });
         });
       }
     }

diff --git a/packages/virtual-list/src/vaadin-virtual-list-mixin.js b/packages/virtual-list/src/vaadin-virtual-list-mixin.js
@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isChrome, isSafari } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -185,17 +186,43 @@ export const VirtualListMixin = (superClass) =>
      * issues. To mitigate these issues, we hide the items container
      * when drag starts to remove it from the drag image.
      *
+     * Virtual lists with fewer rows also have issues on Chromium and Safari
+     * where the drag image is not properly clipped and may include
+     * content outside the virtual list. Temporary inline styles are applied
+     * to mitigate this issue.
+     *
      * Related issues:
      * - https://github.com/vaadin/web-components/issues/7985
      * - https://issues.chromium.org/issues/383356871
+     * - https://github.com/vaadin/web-components/issues/8386
      *
      * @private
      */
     __onDocumentDragStart(e) {
-      if (e.target.contains(this) && this.scrollHeight > 20000) {
-        this.$.items.style.display = 'none';
+      if (e.target.contains(this)) {
+        // Record the original inline styles to restore them later
+        const elements = [e.target, this.$.items];
+        const originalInlineStyles = elements.map((element) => element.style.cssText);
+
+        // With a large number of rows, hide the items
+        if (this.scrollHeight > 20000) {
+          this.$.items.style.display = 'none';
+        }
+
+        // Workaround content outside the virtual list ending up in the drag image on Chromium
+        if (isChrome) {
+          e.target.style.willChange = 'transform';
+        }
+
+        // Workaround text content outside the virtual list ending up in the drag image on Safari
+        if (isSafari) {
+          this.$.items.style.maxHeight = '100%';
+        }
+
         requestAnimationFrame(() => {
-          this.$.items.style.display = '';
+          elements.forEach((element, index) => {
+            element.style.cssText = originalInlineStyles[index];
+          });
         });
       }
     }