fix: measure auto-width correctly for focusButtonMode columns (#7046)

vaadin · Jan 4, 2024 · b152955 · b152955
1 parent 96a64eb
commit b152955
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
@@ -432,6 +432,12 @@ export const GridMixin = (superClass) =>
             cell.style.position = '';
           }
         });
+
+      if (autoWidth) {
+        this.$.scroller.setAttribute('measuring-auto-width', '');
+      } else {
+        this.$.scroller.removeAttribute('measuring-auto-width');
+      }
     }
 
     /**

diff --git a/packages/grid/src/vaadin-grid-styles.js b/packages/grid/src/vaadin-grid-styles.js
@@ -152,6 +152,12 @@ export const gridStyles = css`
     inset: 0;
   }
 
+  /* Switch the focusButtonMode wrapping element to "position: static" temporarily
+     when measuring real width of the cells in the auto-width columns. */
+  [measuring-auto-width] [part~='cell'] > [tabindex] {
+    position: static;
+  }
+
   [part~='details-cell'] {
     position: absolute;
     bottom: 0;

diff --git a/packages/grid/test/column-auto-width.common.js b/packages/grid/test/column-auto-width.common.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { flushGrid, getContainerCell } from './helpers.js';
 
@@ -221,6 +221,26 @@ describe('column auto-width', () => {
 
     expect(headerCell.getBoundingClientRect().width).to.be.closeTo(headerCellWidth, 5);
   });
+
+  describe('focusButtonMode column', () => {
+    beforeEach(async () => {
+      const column = document.createElement('vaadin-grid-column');
+      column.autoWidth = true;
+      column.path = 'b';
+      column._focusButtonMode = true;
+      grid.insertBefore(column, grid.firstElementChild);
+      columns = grid.querySelectorAll('vaadin-grid-column');
+
+      await aTimeout(0);
+    });
+
+    it('should calculate auto-width of focusButtonMode column correctly', async () => {
+      grid.items = testItems;
+
+      await recalculateWidths();
+      expectColumnWidthsToBeOk(columns, [114, 71, 114, 84, 107]);
+    });
+  });
 });
 
 describe('tree column', () => {