fix: Edit cell mouseout should save & excel copy buffer should still work

package.json

@@ -29,7 +29,7 @@
     "build:watch": "tsc --build ./tsconfig.packages.json --watch",
     "predev": "pnpm build:esm:styles",
     "dev": "run-p dev:watch webpack:watch",
-    "dev:watch": "lerna watch --no-bail --file-delimiter=\",\" --glob=\"src/**/*.{ts,scss}\" --ignored=\"src/**/*.spec.ts\" -- cross-env-shell pnpm run -r --filter $LERNA_PACKAGE_NAME dev",
+    "dev:watch": "lerna watch --no-bail --file-delimiter=\",\" --glob=\"src/**/*.{ts,scss}\" --ignored=\"**/*.spec.ts\" -- cross-env-shell pnpm run -r --filter $LERNA_PACKAGE_NAME dev",
     "webpack:watch": "pnpm -r --parallel run webpack:dev",
     "preview:publish": "lerna publish from-package --dry-run",
     "preview:version": "lerna version --dry-run",

packages/common/src/editors/__tests__/autocompleterEditor.spec.ts

@@ -28,6 +28,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getOptions: () => gridOptionMock,
   getColumns: jest.fn(),
@@ -265,6 +266,7 @@ describe('AutocompleterEditor', () => {
       const spy = jest.spyOn(editorElm, 'focus');
       editor.focus();
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spy).toHaveBeenCalled();
     });
 

packages/common/src/editors/__tests__/checkboxEditor.spec.ts

@@ -23,6 +23,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getOptions: () => gridOptionMock,
   getColumns: jest.fn(),
@@ -200,6 +201,7 @@ describe('CheckboxEditor', () => {
         editor.focus();
         editor.editorDomElement.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(false);
       });
     });

packages/common/src/editors/__tests__/dateEditor.spec.ts

@@ -27,6 +27,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -190,6 +191,7 @@ describe('DateEditor', () => {
       editor.show();
       editor.focus();
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(calendarElm).toBeTruthy();
       expect(spy).toHaveBeenCalled();
     });

packages/common/src/editors/__tests__/dualInputEditor.spec.ts

@@ -27,6 +27,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -215,6 +216,7 @@ describe('DualInputEditor', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
     });
 

packages/common/src/editors/__tests__/floatEditor.spec.ts

@@ -27,6 +27,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -178,6 +179,7 @@ describe('FloatEditor', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
     });
 
@@ -191,6 +193,7 @@ describe('FloatEditor', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
     });
 
@@ -205,6 +208,7 @@ describe('FloatEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(true);
       });
 

packages/common/src/editors/__tests__/inputEditor.spec.ts

@@ -27,6 +27,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -188,6 +189,7 @@ describe('InputEditor (TextEditor)', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
       expect(editor.isValueTouched()).toBe(true);
     });
@@ -202,6 +204,7 @@ describe('InputEditor (TextEditor)', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
     });
 
@@ -216,6 +219,7 @@ describe('InputEditor (TextEditor)', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(true);
       });
 

packages/common/src/editors/__tests__/inputPasswordEditor.spec.ts

@@ -27,6 +27,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -188,6 +189,7 @@ describe('InputPasswordEditor', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
       expect(editor.isValueTouched()).toBe(true);
     });
@@ -202,6 +204,7 @@ describe('InputPasswordEditor', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
     });
 
@@ -216,6 +219,7 @@ describe('InputPasswordEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(true);
       });
 
@@ -229,6 +233,7 @@ describe('InputPasswordEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(false);
       });
 
@@ -242,6 +247,7 @@ describe('InputPasswordEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(true);
       });
     });

packages/common/src/editors/__tests__/integerEditor.spec.ts

@@ -27,6 +27,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -180,6 +181,7 @@ describe('IntegerEditor', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
     });
 
@@ -193,6 +195,7 @@ describe('IntegerEditor', () => {
       editor.focus();
       editorElm.dispatchEvent(event);
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(spyEvent).toHaveBeenCalled();
     });
 
@@ -207,6 +210,7 @@ describe('IntegerEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(true);
       });
 
@@ -220,6 +224,7 @@ describe('IntegerEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(false);
       });
 
@@ -233,6 +238,7 @@ describe('IntegerEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(false);
       });
 
@@ -246,6 +252,7 @@ describe('IntegerEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(true);
       });
     });

packages/common/src/editors/__tests__/longTextEditor.spec.ts

@@ -31,6 +31,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -253,6 +254,7 @@ describe('LongTextEditor', () => {
         editorElm.dispatchEvent(eventKeyDown);
         editorElm.dispatchEvent(eventInput);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(currentTextLengthElm.textContent).toBe('1');
         expect(maxTextLengthElm.textContent).toBe('255');
         expect(editor.isValueChanged()).toBe(true);
@@ -269,6 +271,7 @@ describe('LongTextEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(false);
         expect(editor.isValueTouched()).toBe(true);
       });
@@ -283,6 +286,7 @@ describe('LongTextEditor', () => {
         editor.focus();
         editorElm.dispatchEvent(event);
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editor.isValueChanged()).toBe(true);
         expect(editor.isValueTouched()).toBe(true);
       });
@@ -742,6 +746,7 @@ describe('LongTextEditor', () => {
         const currentTextLengthElm = document.body.querySelector('.editor-footer .text-length') as HTMLDivElement;
         const maxTextLengthElm = document.body.querySelector('.editor-footer .max-length') as HTMLDivElement;
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editorElm.value).toBe('some extra');
         expect(currentTextLengthElm.textContent).toBe('10');
         expect(maxTextLengthElm.textContent).toBe('10');
@@ -763,6 +768,7 @@ describe('LongTextEditor', () => {
         const currentTextLengthElm = document.body.querySelector('.editor-footer .text-length') as HTMLDivElement;
         const maxTextLengthElm = document.body.querySelector('.editor-footer .max-length') as HTMLDivElement;
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(editorElm.value).toBe('some extra');
         expect(currentTextLengthElm.textContent).toBe('10');
         expect(maxTextLengthElm.textContent).toBe('10');

packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts

@@ -28,6 +28,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getOptions: () => gridOptionMock,
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,

packages/common/src/editors/__tests__/selectEditor.spec.ts

@@ -28,6 +28,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -146,6 +147,7 @@ describe('SelectEditor', () => {
       editor.focus();
       const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
 
+      expect(gridStub.focus).toHaveBeenCalled();
       expect(editorCount).toBe(1);
     });
 

packages/common/src/editors/__tests__/singleSelectEditor.spec.ts

@@ -26,6 +26,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getOptions: () => gridOptionMock,
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,

packages/common/src/editors/__tests__/sliderEditor.spec.ts

@@ -23,6 +23,7 @@ const getEditorLockMock = {
 };
 
 const gridStub = {
+  focus: jest.fn(),
   getActiveCell: jest.fn(),
   getColumns: jest.fn(),
   getEditorLock: () => getEditorLockMock,
@@ -421,9 +422,11 @@ describe('SliderEditor', () => {
         const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');
 
         editor = new SliderEditor(editorArguments);
+        editor.focus();
         editor.loadValue(mockItemData);
         editor.save();
 
+        expect(gridStub.focus).toHaveBeenCalled();
         expect(spy).toHaveBeenCalled();
       });
 

packages/common/src/editors/autocompleterEditor.ts

@@ -221,6 +221,9 @@ export class AutocompleterEditor<T extends AutocompleteItem = any> implements Ed
   }
 
   focus() {
+    // always set focus on grid first so that plugin to copy range (SlickCellExternalCopyManager) would still be able to paste at that position
+    this.grid.focus();
+
     if (this._inputElm) {
       this._inputElm.focus();
       this._inputElm.select();

packages/common/src/editors/checkboxEditor.ts

@@ -136,6 +136,9 @@ export class CheckboxEditor implements Editor {
   }
 
   focus(): void {
+    // always set focus on grid first so that plugin to copy range (SlickCellExternalCopyManager) would still be able to paste at that position
+    this.grid.focus();
+
     if (this._input) {
       this._input.focus();
     }

packages/common/src/editors/dateEditor.ts

@@ -240,9 +240,11 @@ export class DateEditor implements Editor {
   }
 
   focus() {
-    if (this._inputElm?.focus) {
-      this._inputElm.focus();
-    }
+    // always set focus on grid first so that plugin to copy range (SlickCellExternalCopyManager) would still be able to paste at that position
+    this.grid.focus();
+
+    this.show();
+    this._inputElm?.focus();
     if (this._inputWithDataElm?.focus) {
       this._inputWithDataElm.focus();
       this._inputWithDataElm.select();