fix: make dashboard draggables work on firefox (#7880)

Author: tomivirkki

packages/dashboard/src/vaadin-dashboard-helpers.js

@@ -47,7 +47,8 @@ export function getItemsArrayOfItem(item, items) {
  * @param {HTMLElement} element the element
  */
 export function getElementItem(element) {
-  return element.closest(WRAPPER_LOCAL_NAME).__item;
+  const wrapper = element.closest(WRAPPER_LOCAL_NAME);
+  return wrapper && wrapper.__item;
 }
 
 /**

packages/dashboard/src/vaadin-dashboard-item-mixin.js

@@ -92,15 +92,16 @@ export const DashboardItemMixin = (superClass) =>
 
     /** @private */
     __renderDragHandle() {
-      return html`<button
-        aria-label="${this.__i18n.move}"
-        title="${this.__i18n.move}"
-        id="drag-handle"
-        draggable="true"
-        class="drag-handle"
-        tabindex="${this.__selected ? 0 : -1}"
-        @click="${() => this.__enterMoveMode()}"
-      ></button>`;
+      // To make the button draggable on Firefox, using a workaround from https://stackoverflow.com/a/55019027/3409629
+      return html`<label draggable="true" class="drag-handle" id="drag-handle-wrapper">
+        <button
+          id="drag-handle"
+          aria-label="${this.__i18n.move}"
+          title="${this.__i18n.move}"
+          tabindex="${this.__selected ? 0 : -1}"
+          @click="${() => this.__enterMoveMode()}"
+        ></button>
+      </label>`;
     }
 
     /** @private */
@@ -116,17 +117,18 @@ export const DashboardItemMixin = (superClass) =>
 
     /** @private */
     __renderFocusButton(i18nSelectTitleForEditingProperty) {
-      return html`<button
-        aria-label=${this.__i18n[i18nSelectTitleForEditingProperty]}
-        aria-describedby="title"
-        aria-pressed="${!!this.__selected}"
-        id="focus-button"
-        draggable="true"
-        class="drag-handle"
-        @click="${() => {
-          this.__selected = true;
-        }}"
-      ></button>`;
+      // To make the button draggable on Firefox, using a workaround from https://stackoverflow.com/a/55019027/3409629
+      return html`<label draggable="true" class="drag-handle" id="focus-button-wrapper">
+        <button
+          id="focus-button"
+          aria-label=${this.__i18n[i18nSelectTitleForEditingProperty]}
+          aria-describedby="title"
+          aria-pressed="${!!this.__selected}"
+          @click="${() => {
+            this.__selected = true;
+          }}"
+        ></button>
+      </label>`;
     }
 
     /** @private */

packages/dashboard/src/vaadin-dashboard-styles.js

@@ -43,16 +43,28 @@ export const dashboardWidgetAndSectionStyles = css`
     align-items: center;
   }
 
+  #focus-button-wrapper,
   #focus-button {
     position: absolute;
     inset: 0;
     opacity: 0;
   }
 
+  #focus-button {
+    pointer-events: none;
+    padding: 0;
+    border: none;
+  }
+
+  #drag-handle-wrapper {
+    z-index: 1;
+    cursor: grab;
+  }
+
   #drag-handle {
     font-size: 30px;
-    cursor: grab;
     z-index: 1;
+    pointer-events: none;
   }
 
   #drag-handle::before {

packages/dashboard/src/vaadin-dashboard.js

@@ -360,6 +360,9 @@ class Dashboard extends ControllerMixin(DashboardLayoutMixin(ElementMixin(Themab
 
   /** @private */
   __dispatchCustomEvent(eventName, item, value) {
+    if (!item) {
+      return;
+    }
     this.dispatchEvent(
       new CustomEvent(eventName, {
         detail: {

packages/dashboard/test/dashboard-widget-reordering.test.ts

@@ -1,7 +1,9 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { fixtureSync, isFirefox, nextFrame } from '@vaadin/testing-helpers';
+import { resetMouse, sendMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '../vaadin-dashboard.js';
+import { hover } from '../../button/test/visual/helpers.js';
 import type { Dashboard, DashboardItem, DashboardSectionItem } from '../vaadin-dashboard.js';
 import {
   createDragEvent,
@@ -56,6 +58,10 @@ describe('dashboard - widget reordering', () => {
     ]);
   });
 
+  afterEach(async () => {
+    await resetMouse();
+  });
+
   describe('drag and drop', () => {
     it('should reorder the widgets while dragging (start -> end)', async () => {
       // Start dragging the first widget
@@ -204,6 +210,37 @@ describe('dashboard - widget reordering', () => {
       ]);
     });
 
+    // The sendMouse helper does not seem to work well with Firefox
+    (isFirefox ? it.skip : it)('should reorder using native DnD', async () => {
+      const spy = sinon.spy();
+      dashboard.addEventListener('dashboard-item-selected-changed', spy);
+      await resetMouse();
+      // Hover over the widget drag handle
+      await hover(getDraggable(getElementFromCell(dashboard, 0, 0)!));
+      // Press down the left mouse button
+      await sendMouse({
+        type: 'down',
+      });
+      // Move the mouse to the second widget
+      const secondWidget = getElementFromCell(dashboard, 0, 1)!;
+      const secondWidgetRect = secondWidget.getBoundingClientRect();
+      const y = secondWidgetRect.top + secondWidgetRect.height / 2;
+      const x = document.dir === 'rtl' ? secondWidgetRect.left + 1 : secondWidgetRect.right - 1;
+      await sendMouse({ type: 'move', position: [Math.round(x), Math.round(y)] });
+
+      // Release the left mouse button
+      await sendMouse({ type: 'up' });
+
+      // Expect the widgets to be reordered
+      // prettier-ignore
+      expectLayout(dashboard, [
+        [1, 0],
+      ]);
+
+      // Expect dashboard-item-selected-changed not to be fired
+      expect(spy).to.not.have.been.called;
+    });
+
     it('should not throw with a lazy renderer while reordering', async () => {
       // Assign a renderer that initially renders nothing
       const syncRenderer = dashboard.renderer!;