fix(editor): shouldn't call cell changed when cell value is undefined

- we were already checking for null value but undefined is another possibility, so now it checks for null/undefined in isValueChanged() method

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

@@ -203,6 +203,7 @@ describe('AutoCompleteEditor', () => {
       const event = new (window.window as any).KeyboardEvent('keydown', { keyCode: KEY_CHAR_A, bubbles: true, cancelable: true });
 
       editor = new AutoCompleteEditor(editorArguments);
+      editor.setValue('z');
       const editorElm = divContainer.querySelector<HTMLInputElement>('input.editor-gender');
 
       editorElm.focus();
@@ -365,6 +366,7 @@ describe('AutoCompleteEditor', () => {
         const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');
 
         editor = new AutoCompleteEditor(editorArguments);
+        editor.setValue('a');
         editor.save();
 
         expect(spy).toHaveBeenCalled();
@@ -375,6 +377,7 @@ describe('AutoCompleteEditor', () => {
         const spy = jest.spyOn(editorArguments, 'commitChanges');
 
         editor = new AutoCompleteEditor(editorArguments);
+        editor.setValue('a');
         editor.save();
 
         expect(spy).toHaveBeenCalled();

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

@@ -226,6 +226,7 @@ describe('DualInputEditor', () => {
         const event = new (window.window as any).KeyboardEvent('keydown', { keyCode: KEY_CHAR_0, bubbles: true, cancelable: true });
 
         editor = new DualInputEditor(editorArguments);
+        editor.setValues(['9', '9']);
         const editorElm = divContainer.querySelector<HTMLInputElement>('input.editor-range');
 
         editor.focus();

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

@@ -179,6 +179,7 @@ describe('FloatEditor', () => {
         const event = new (window.window as any).KeyboardEvent('keydown', { keyCode: KEY_CHAR_0, bubbles: true, cancelable: true });
 
         editor = new FloatEditor(editorArguments);
+        editor.setValue(9);
         const editorElm = divContainer.querySelector<HTMLInputElement>('input.editor-price');
 
         editor.focus();

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

@@ -180,6 +180,7 @@ describe('IntegerEditor', () => {
         const event = new (window.window as any).KeyboardEvent('keydown', { keyCode: KEY_CHAR_0, bubbles: true, cancelable: true });
 
         editor = new IntegerEditor(editorArguments);
+        editor.setValue(9);
         const editorElm = divContainer.querySelector<HTMLInputElement>('input.editor-price');
 
         editor.focus();

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

@@ -202,6 +202,7 @@ describe('LongTextEditor', () => {
         const event = new (window.window as any).KeyboardEvent('keydown', { keyCode: KEY_CHAR_A, bubbles: true, cancelable: true });
 
         editor = new LongTextEditor(editorArguments);
+        editor.setValue('z');
         const editorElm = document.body.querySelector<HTMLTextAreaElement>('.editor-title textarea');
 
         editor.focus();
@@ -227,6 +228,7 @@ describe('LongTextEditor', () => {
         const event = new (window.window as any).KeyboardEvent('keydown', { keyCode: KeyCode.ENTER, bubbles: true, cancelable: true });
 
         editor = new LongTextEditor(editorArguments);
+        editor.setValue('a');
         const editorElm = document.body.querySelector<HTMLTextAreaElement>('.editor-title textarea');
 
         editor.focus();

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

@@ -188,6 +188,7 @@ describe('TextEditor', () => {
         const event = new (window.window as any).KeyboardEvent('keydown', { keyCode: KEY_CHAR_A, bubbles: true, cancelable: true });
 
         editor = new TextEditor(editorArguments);
+        editor.setValue('z');
         const editorElm = divContainer.querySelector<HTMLInputElement>('input.editor-title');
 
         editor.focus();

packages/common/src/editors/autoCompleteEditor.ts

@@ -159,11 +159,12 @@ export class AutoCompleteEditor implements Editor {
   }
 
   isValueChanged(): boolean {
+    const elmValue = this._$editorElm.val();
     const lastKeyEvent = this._lastInputKeyEvent && this._lastInputKeyEvent.keyCode;
     if (this.columnEditor && this.columnEditor.alwaysSaveOnEnterKey && lastKeyEvent === KeyCode.ENTER) {
       return true;
     }
-    return (!(this._$editorElm.val() === '' && this._defaultTextValue === null)) && (this._$editorElm.val() !== this._defaultTextValue);
+    return (!(elmValue === '' && (this._defaultTextValue === null || this._defaultTextValue === undefined))) && (elmValue !== this._defaultTextValue);
   }
 
   loadValue(item: any) {

packages/common/src/editors/dualInputEditor.ts

@@ -242,8 +242,8 @@ export class DualInputEditor implements Editor {
     if ((leftEditorParams && leftEditorParams.alwaysSaveOnEnterKey || rightEditorParams && rightEditorParams.alwaysSaveOnEnterKey) && lastKeyEvent === KeyCode.ENTER) {
       return true;
     }
-    const leftResult = (!(leftElmValue === '' && this.originalLeftValue === null)) && (leftElmValue !== this.originalLeftValue);
-    const rightResult = (!(rightElmValue === '' && this.originalRightValue === null)) && (rightElmValue !== this.originalRightValue);
+    const leftResult = (!(leftElmValue === '' && (this.originalLeftValue === null || this.originalLeftValue === undefined))) && (leftElmValue !== this.originalLeftValue);
+    const rightResult = (!(rightElmValue === '' && (this.originalRightValue === null || this.originalRightValue === undefined))) && (rightElmValue !== this.originalRightValue);
     return leftResult || rightResult;
   }
 

packages/common/src/editors/floatEditor.ts

@@ -152,7 +152,7 @@ export class FloatEditor implements Editor {
     if (this.columnEditor && this.columnEditor.alwaysSaveOnEnterKey && lastKeyEvent === KeyCode.ENTER) {
       return true;
     }
-    return (!(elmValue === '' && this.originalValue === null)) && (elmValue !== this.originalValue);
+    return (!(elmValue === '' && (this.originalValue === null || this.originalValue === undefined))) && (elmValue !== this.originalValue);
   }
 
   loadValue(item: any) {

packages/common/src/editors/integerEditor.ts

@@ -129,7 +129,7 @@ export class IntegerEditor implements Editor {
     if (this.columnEditor && this.columnEditor.alwaysSaveOnEnterKey && lastKeyEvent === KeyCode.ENTER) {
       return true;
     }
-    return (!(elmValue === '' && this.originalValue === null)) && (elmValue !== this.originalValue);
+    return (!(elmValue === '' && (this.originalValue === null || this.originalValue === undefined))) && (elmValue !== this.originalValue);
   }
 
   loadValue(item: any) {

packages/common/src/editors/longTextEditor.ts

@@ -163,7 +163,8 @@ export class LongTextEditor implements Editor {
   }
 
   isValueChanged(): boolean {
-    return (!(this._$textarea.val() === '' && this.defaultValue === null)) && (this._$textarea.val() !== this.defaultValue);
+    const elmValue = this._$textarea.val();
+    return (!(elmValue === '' && (this.defaultValue === null || this.defaultValue === undefined))) && (elmValue !== this.defaultValue);
   }
 
   loadValue(item: any) {

packages/common/src/editors/textEditor.ts

@@ -124,7 +124,7 @@ export class TextEditor implements Editor {
     if (this.columnEditor && this.columnEditor.alwaysSaveOnEnterKey && lastKeyEvent === KeyCode.ENTER) {
       return true;
     }
-    return (!(elmValue === '' && this.originalValue === null)) && (elmValue !== this.originalValue);
+    return (!(elmValue === '' && (this.originalValue === null || this.originalValue === undefined))) && (elmValue !== this.originalValue);
   }
 
   loadValue(item: any) {

packages/web-demo-vanilla-bundle/src/examples/example03.ts

@@ -68,6 +68,7 @@ export class Example3 {
     const gridContainerElm = document.querySelector(`.grid3`);
 
     gridContainerElm.addEventListener('onclick', this.handleOnClick.bind(this));
+    gridContainerElm.addEventListener('oncellchange', this.handleOnCellChange.bind(this));
     gridContainerElm.addEventListener('onvalidationerror', this.handleValidationError.bind(this));
     gridContainerElm.addEventListener('onitemdeleted', this.handleItemDeleted.bind(this));
     gridContainerElm.addEventListener('onslickergridcreated', this.handleOnSlickerGridCreated.bind(this));
@@ -372,6 +373,10 @@ export class Example3 {
         cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100,
         effortDriven: (i % 5 === 0)
       };
+
+      // if (i % 8) {
+      //   delete tmpArray[i].duration; // test with undefined properties
+      // }
     }
     if (this.slickgridLwc) {
       this.slickgridLwc.dataset = tmpArray;
@@ -479,6 +484,10 @@ export class Example3 {
     console.log('onClick', event.detail);
   }
 
+  handleOnCellChange(event) {
+    console.log('onCellChanged', event.detail);
+  }
+
   handleValidationError(event) {
     console.log('handleValidationError', event.detail);
     const args = event.detail && event.detail.args;