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

…#7479)

Co-authored-by: Břetislav Wajtr <[email protected]>

packages/grid/src/vaadin-grid-mixin.js

@@ -427,6 +427,12 @@ export const GridMixin = (superClass) =>
             cell.style.position = '';
           }
         });
+
+      if (autoWidth) {
+        this.$.scroller.setAttribute('measuring-auto-width', '');
+      } else {
+        this.$.scroller.removeAttribute('measuring-auto-width');
+      }
     }
 
     /**

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;

packages/grid/test/column-auto-width.common.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', () => {