@vaadin/grid 23.0.1 → 23.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.0.1",
+  "version": "23.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -41,19 +41,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "^23.0.1",
-    "@vaadin/component-base": "^23.0.1",
-    "@vaadin/text-field": "^23.0.1",
-    "@vaadin/vaadin-lumo-styles": "^23.0.1",
-    "@vaadin/vaadin-material-styles": "^23.0.1",
-    "@vaadin/vaadin-themable-mixin": "^23.0.1"
+    "@vaadin/checkbox": "^23.0.4",
+    "@vaadin/component-base": "^23.0.4",
+    "@vaadin/text-field": "^23.0.4",
+    "@vaadin/vaadin-lumo-styles": "^23.0.4",
+    "@vaadin/vaadin-material-styles": "^23.0.4",
+    "@vaadin/vaadin-themable-mixin": "^23.0.4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.0.1",
+    "@vaadin/polymer-legacy-adapter": "^23.0.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "05fcc6daa21325753cf528c9c1072ccd8dd1e52e"
+  "gitHead": "d8db2046661c42fb5aac09ed683b500bf4613b26"
 }

package/src/vaadin-grid-column-resizing-mixin.js

@@ -57,7 +57,7 @@ export const ColumnResizingMixin = (superClass) =>
         const targetCell = columnRowCells.filter((cell) => cell._column === column)[0];
         // Resize the target column
         if (targetCell.offsetWidth) {
-          const style = window.getComputedStyle(targetCell);
+          const style = getComputedStyle(targetCell._content);
           const minWidth =
             10 +
             parseInt(style.paddingLeft) +

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -91,6 +91,9 @@ export const KeyboardNavigationMixin = (superClass) =>
       this.addEventListener('mousedown', () => {
         this.toggleAttribute('navigating', false);
         this._isMousedown = true;
+
+        // Reset stored order when moving focus with mouse.
+        this._focusedColumnOrder = undefined;
       });
       this.addEventListener('mouseup', () => (this._isMousedown = false));
     }

package/src/vaadin-grid-tree-toggle.js

@@ -81,6 +81,7 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
         :host {
           display: inline-flex;
           align-items: baseline;
+          max-width: 100%;
 
           /* CSS API for :host */
           --vaadin-grid-tree-toggle-level-offset: 1em;
@@ -125,6 +126,12 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
         :host([leaf]) [part='toggle'] {
           visibility: hidden;
         }
+
+        slot {
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       </style>
 
       <span id="level-spacer"></span>

package/src/vaadin-grid.js

@@ -7,7 +7,7 @@ import './vaadin-grid-column.js';
 import './vaadin-grid-styles.js';
 import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { isAndroid, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
+import { isAndroid, isChrome, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -685,13 +685,16 @@ class Grid extends ElementMixin(
     // focusable slot wrapper, that is why cells are not focused with
     // mousedown. Workaround: listen for mousedown and focus manually.
     cellContent.addEventListener('mousedown', () => {
-      if (window.chrome) {
+      if (isChrome) {
         // Chrome bug: focusing before mouseup prevents text selection, see http://crbug.com/771903
-        const mouseUpListener = () => {
-          if (!cellContent.contains(this.getRootNode().activeElement)) {
+        const mouseUpListener = (event) => {
+          // If focus is on element within the cell content — respect it, do not change
+          const contentContainsFocusedElement = cellContent.contains(this.getRootNode().activeElement);
+          // Only focus if mouse is released on cell content itself
+          const mouseUpWithinCell = cellContent.contains(event.target);
+          if (!contentContainsFocusedElement && mouseUpWithinCell) {
             cell.focus();
           }
-          // If focus is in the cell content — respect it, do not change.
           document.removeEventListener('mouseup', mouseUpListener, true);
         };
         document.addEventListener('mouseup', mouseUpListener, true);