@revolist/revogrid 4.23.22 → 4.23.23

package/dist/cjs/revo-grid.cjs.entry.js

@@ -2465,11 +2465,14 @@ const RevoGridComponent = class {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), index.h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: viewport_helpers.DATA_SLOT }), index.h("slot", { name: `data-${view.type}-${data.type}` })), index.h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), index.h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, index.h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

package/dist/cjs/revogr-attribution_7.cjs.entry.js

@@ -298,6 +298,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -359,7 +360,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!edit_utils.isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -788,12 +791,7 @@ const OverlaySelection = class {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -922,9 +920,9 @@ const OverlaySelection = class {
                 nodes.push(index.h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (index.h(index.Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (index.h(index.Host, { key: '2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, index.h("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, index.h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -1026,15 +1024,16 @@ const OverlaySelection = class {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered

package/dist/collection/components/overlay/keyboard.service.js

@@ -30,6 +30,7 @@ export class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -91,7 +92,9 @@ export class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position

package/dist/collection/components/overlay/revogr-overlay-selection.js

@@ -100,12 +100,7 @@ export class OverlaySelection {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -234,9 +229,9 @@ export class OverlaySelection {
                 nodes.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (h(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (h(Host, { key: '2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -338,15 +333,16 @@ export class OverlaySelection {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered

package/dist/collection/components/revoGrid/revo-grid.js

@@ -1070,11 +1070,14 @@ export class RevoGridComponent {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

package/dist/esm/revo-grid.entry.js

@@ -2463,11 +2463,14 @@ const RevoGridComponent = class {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

package/dist/esm/revogr-attribution_7.entry.js

@@ -296,6 +296,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -357,7 +358,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -786,12 +789,7 @@ const OverlaySelection = class {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -920,9 +918,9 @@ const OverlaySelection = class {
                 nodes.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (h(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (h(Host, { key: '2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -1024,15 +1022,16 @@ const OverlaySelection = class {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered

package/dist/revo-grid/revo-grid.entry.js

@@ -2463,11 +2463,14 @@ const RevoGridComponent = class {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

package/dist/revo-grid/revogr-attribution_7.entry.js

@@ -296,6 +296,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -357,7 +358,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -786,12 +789,7 @@ const OverlaySelection = class {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -920,9 +918,9 @@ const OverlaySelection = class {
                 nodes.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (h(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (h(Host, { key: '2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -1024,15 +1022,16 @@ const OverlaySelection = class {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered

package/dist/types/components/overlay/keyboard.service.d.ts

@@ -3,7 +3,7 @@ import { EventData } from './selection.utils';
 import { Cell, Nullable, RangeArea, SelectionStoreState } from "../../types/index";
 type Config = {
     selectionStore: Observable<SelectionStoreState>;
-    change(val?: any): void;
+    change(val?: any): boolean;
     cancel(): void;
     clearCell(): void;
     focus(focus: Cell, changes: Partial<Cell>, focusNextViewport?: number): boolean;
@@ -13,7 +13,7 @@ type Config = {
     selectAll(): void;
 };
 export declare class KeyboardService {
-    private sv;
+    private readonly sv;
     constructor(sv: Config);
     /**
      * Appends printable key input that arrives after edit mode was requested

package/dist/types/components/overlay/revogr-overlay-selection.d.ts

@@ -11,7 +11,7 @@ export declare class OverlaySelection {
     /**
      * Readonly mode.
      */
-    readonly: boolean;
+    readonly readonly: boolean;
     /**
      * Range selection allowed.
      */
@@ -189,7 +189,7 @@ export declare class OverlaySelection {
     private autoFillService;
     private orderEditor?;
     private revogrEdit?;
-    private unsubscribeSelectionStore;
+    private readonly unsubscribeSelectionStore;
     onMouseMove(e: MouseEvent | TouchEvent): void;
     /**
      * Action finished inside the document.
@@ -242,7 +242,7 @@ export declare class OverlaySelection {
     /**
      * Start cell editing
      */
-    protected doEdit(val?: string): void;
+    protected doEdit(val?: string): boolean;
     /**
      * Close editor event triggered
      * @param details - if it requires focus next

package/hydrate/index.js

@@ -13636,6 +13636,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -13697,7 +13698,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -14129,12 +14132,7 @@ class OverlaySelection {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -14263,9 +14261,9 @@ class OverlaySelection {
                 nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (hAsync(Host, { key: '2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -14367,15 +14365,16 @@ class OverlaySelection {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered
@@ -20335,11 +20334,14 @@ class RevoGridComponent {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), hAsync("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), hAsync("slot", { name: `data-${view.type}-${data.type}` })), hAsync("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), hAsync("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, hAsync("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

package/hydrate/index.mjs

@@ -13634,6 +13634,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -13695,7 +13696,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -14127,12 +14130,7 @@ class OverlaySelection {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -14261,9 +14259,9 @@ class OverlaySelection {
                 nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (hAsync(Host, { key: '2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -14365,15 +14363,16 @@ class OverlaySelection {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered
@@ -20333,11 +20332,14 @@ class RevoGridComponent {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), hAsync("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), hAsync("slot", { name: `data-${view.type}-${data.type}` })), hAsync("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), hAsync("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, hAsync("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.23.22",
+  "version": "4.23.23",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",