@vaadin/grid-pro 24.10.6 → 24.10.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "24.10.6",
+  "version": "24.10.8",
   "publishConfig": {
     "access": "public"
   },
@@ -39,20 +39,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "~24.10.6",
-    "@vaadin/component-base": "~24.10.6",
-    "@vaadin/grid": "~24.10.6",
-    "@vaadin/lit-renderer": "~24.10.6",
-    "@vaadin/select": "~24.10.6",
-    "@vaadin/text-field": "~24.10.6",
-    "@vaadin/vaadin-lumo-styles": "~24.10.6",
-    "@vaadin/vaadin-material-styles": "~24.10.6",
-    "@vaadin/vaadin-themable-mixin": "~24.10.6",
+    "@vaadin/checkbox": "~24.10.8",
+    "@vaadin/component-base": "~24.10.8",
+    "@vaadin/grid": "~24.10.8",
+    "@vaadin/lit-renderer": "~24.10.8",
+    "@vaadin/select": "~24.10.8",
+    "@vaadin/text-field": "~24.10.8",
+    "@vaadin/vaadin-lumo-styles": "~24.10.8",
+    "@vaadin/vaadin-material-styles": "~24.10.8",
+    "@vaadin/vaadin-themable-mixin": "~24.10.8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.10.6",
-    "@vaadin/test-runner-commands": "~24.10.6",
+    "@vaadin/chai-plugins": "~24.10.8",
+    "@vaadin/test-runner-commands": "~24.10.8",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "fa53af5bc88459de1ff2f4c2e740333c91a1ab50"
+  "gitHead": "0b3fa9c6c4b44a68b2ae557f15bf11e748e01ccb"
 }

package/src/vaadin-grid-pro-inline-editing-mixin.js

@@ -363,15 +363,27 @@ export const InlineEditingMixin = (superClass) =>
 
     /** @private */
     _startEdit(cell, column) {
-      const isCellEditable = this._isCellEditable(cell);
-
       // TODO: remove `_editingDisabled` after Flow counterpart is updated.
-      if (this.disabled || this._editingDisabled || !isCellEditable) {
+      if (this.disabled || this._editingDisabled || !this._isCellEditable(cell)) {
         return;
       }
-      // Cancel debouncer enqueued on focusout
+
+      // Unfocusable editors never fire focusout, so no stop was scheduled.
+      // Stop the previous edit here.
+      if (this.__edited && this.__edited.cell !== cell) {
+        this._stopEdit();
+      }
+
+      // Cancel debouncer enqueued on focusout, including one enqueued by the
+      // blur() in the stop above
       this._cancelStopEdit();
 
+      // Stopping the previous edit runs listeners that may have made this cell
+      // non-editable
+      if (!this._isCellEditable(cell)) {
+        return;
+      }
+
       this._scrollHorizontallyToCell(cell);
 
       const model = this.__getRowModel(cell.parentElement);
@@ -400,42 +412,49 @@ export const InlineEditingMixin = (superClass) =>
       if (!this.__edited) {
         return;
       }
+      if (this.__stoppingEdit) {
+        // `item-property-changed` listeners may re-render and re-enter here
+        // before `__edited` is cleared, so ignore nested calls, including cancels
+        return;
+      }
       const { cell, column, model } = this.__edited;
-
-      if (!shouldCancel && !this.hasAttribute('loading-editor')) {
-        const editor = column._getEditorComponent(cell);
-        if (editor) {
-          const value = column._getEditorValue(editor);
-          if (value !== get(column.path, model.item)) {
-            // In some cases, where the value comes from the editor's change
-            // event (eg. custom editor in vaadin-grid-pro-flow), the event is
-            // not dispatched in FF/Safari/Edge. That's due the change event
-            // doesn't occur when the editor is removed from the DOM. Manually
-            // calling blur makes the event to be dispatched.
-            editor.blur();
-
-            this.dispatchEvent(
-              new CustomEvent('item-property-changed', {
-                detail: {
-                  index: model.index,
-                  item: model.item,
-                  path: column.path,
-                  value,
-                },
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-              }),
-            );
+      this.__stoppingEdit = true;
+
+      try {
+        if (!shouldCancel && !this.hasAttribute('loading-editor')) {
+          const editor = column._getEditorComponent(cell);
+          if (editor) {
+            const value = column._getEditorValue(editor);
+            if (value !== get(column.path, model.item)) {
+              // Some browsers skip the change event when the editor is
+              // removed from the DOM, so blur to dispatch it.
+              editor.blur();
+
+              this.dispatchEvent(
+                new CustomEvent('item-property-changed', {
+                  detail: {
+                    index: model.index,
+                    item: model.item,
+                    path: column.path,
+                    value,
+                  },
+                  bubbles: true,
+                  cancelable: true,
+                  composed: true,
+                }),
+              );
+            }
           }
         }
-      }
 
-      column._stopCellEdit(cell, model);
+        column._stopCellEdit(cell, model);
 
-      this.__edited = null;
+        this.__edited = null;
 
-      this.removeEventListener('item-property-changed', this.__boundItemPropertyChanged);
+        this.removeEventListener('item-property-changed', this.__boundItemPropertyChanged);
+      } finally {
+        this.__stoppingEdit = false;
+      }
 
       if (shouldRestoreFocus) {
         cell.focus();

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/grid-pro",
-  "version": "24.10.6",
+  "version": "24.10.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -401,7 +401,7 @@
         },
         {
           "name": "vaadin-grid-pro",
-          "description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.10.6/#/elements/vaadin-grid) documentation for details.\n\n```\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](https://cdn.vaadin.com/vaadin-web-components/24.10.6/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.10.6/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/24.10.6/#/elements/vaadin-select).",
+          "description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.10.8/#/elements/vaadin-grid) documentation for details.\n\n```\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](https://cdn.vaadin.com/vaadin-web-components/24.10.8/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.10.8/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/24.10.8/#/elements/vaadin-select).",
           "attributes": [
             {
               "name": "accessible-name",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/grid-pro",
-  "version": "24.10.6",
+  "version": "24.10.8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -177,7 +177,7 @@
         },
         {
           "name": "vaadin-grid-pro",
-          "description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.10.6/#/elements/vaadin-grid) documentation for details.\n\n```\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](https://cdn.vaadin.com/vaadin-web-components/24.10.6/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.10.6/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/24.10.6/#/elements/vaadin-select).",
+          "description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.10.8/#/elements/vaadin-grid) documentation for details.\n\n```\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](https://cdn.vaadin.com/vaadin-web-components/24.10.8/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.10.8/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/24.10.8/#/elements/vaadin-select).",
           "extension": true,
           "attributes": [
             {