fix: handle focus button mode columns for reordering (#7273) (#7282)

vaadin · Mar 28, 2024 · 42df54a · 42df54a
1 parent 573389b
commit 42df54a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git a/packages/grid/src/vaadin-grid-column-reordering-mixin.js b/packages/grid/src/vaadin-grid-column-reordering-mixin.js
@@ -237,13 +237,26 @@ export const ColumnReorderingMixin = (superClass) =>
       if (!this._draggedColumn) {
         this.$.scroller.toggleAttribute('no-content-pointer-events', true);
       }
-      const cell = this.shadowRoot.elementFromPoint(x, y);
+      const elementFromPoint = this.shadowRoot.elementFromPoint(x, y);
       this.$.scroller.toggleAttribute('no-content-pointer-events', false);
 
-      // Make sure the element is actually a cell
-      if (cell && cell._column) {
-        return cell;
+      return this._getCellFromElement(elementFromPoint);
+    }
+
+    /** @private */
+    _getCellFromElement(element) {
+      if (element) {
+        // Check if element is a cell
+        if (element._column) {
+          return element;
+        }
+        // Check if element is the cell of a focus button mode column
+        const { parentElement } = element;
+        if (parentElement && parentElement._focusButton === element) {
+          return parentElement;
+        }
       }
+      return null;
     }
 
     /**

diff --git a/packages/grid/test/column-reordering.common.js b/packages/grid/test/column-reordering.common.js
@@ -364,6 +364,41 @@ describe('reordering simple grid', () => {
       const e = spy.firstCall.args[0];
       expect(e.detail.columns.map((column) => column.getAttribute('index'))).to.eql(['2', '1', '3', '4']);
     });
+
+    describe('focus button mode', () => {
+      beforeEach(() => {
+        grid = fixtureSync(`
+          <vaadin-grid column-reordering-allowed>
+            <vaadin-grid-column path="name"></vaadin-grid-column>
+            <vaadin-grid-column path="age"></vaadin-grid-column>
+          </vaadin-grid>
+        `);
+        grid.querySelectorAll('vaadin-grid-column').forEach((col) => {
+          col._focusButtonMode = true;
+        });
+        grid.items = [
+          { name: 'John', age: 30 },
+          { name: 'Ringo', age: 40 },
+        ];
+        flushGrid(grid);
+        headerContent = [
+          getContainerCell(grid.$.header, 0, 0)._content,
+          getContainerCell(grid.$.header, 0, 1)._content,
+        ];
+      });
+
+      it('should allow dropping over header cell of another column', () => {
+        dragAndDropOver(headerContent[0], headerContent[1]);
+        expect(getVisualHeaderCellContent(grid, 0, 0).innerText).to.be.equal('Age');
+        expect(getVisualHeaderCellContent(grid, 0, 1).innerText).to.be.equal('Name');
+      });
+
+      it('should allow dropping over body cell of another column', () => {
+        dragAndDropOver(headerContent[0], getVisualCellContent(grid.$.items, 0, 1));
+        expect(getVisualHeaderCellContent(grid, 0, 0).innerText).to.be.equal('Age');
+        expect(getVisualHeaderCellContent(grid, 0, 1).innerText).to.be.equal('Name');
+      });
+    });
   });
 
   describe('frozen columns', () => {