feat: update according to review; add unit tests

examples/vite-demo-vanilla-bundle/src/examples/example11.ts

@@ -175,7 +175,7 @@ export default class Example11 {
         type: FieldType.date, outputType: FieldType.dateIso,
         filterable: true,
         filter: { model: Filters.compoundDate },
-        editor: { model: Editors.date, massUpdate: true, disabled: false, readOnly: false },
+        editor: { model: Editors.date, massUpdate: true, disabled: false, editorOptions: { allowInput: true } },
       },
       {
         id: 'finish', name: 'Finish', field: 'finish', sortable: true, minWidth: 80,
@@ -293,7 +293,7 @@ export default class Example11 {
             }
           } else if ((event.target as HTMLElement).classList.contains('mdi-check-underline')) {
             this.slickerGridInstance?.gridService.updateItem({ ...dataContext, completed: true });
-            alert(`The "${dataContext.start}" is now Completed`);
+            alert(`The "${dataContext.title}" is now Completed`);
           }
         }
       },

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

@@ -141,6 +141,34 @@ describe('DateEditor', () => {
       expect(showSpy).toHaveBeenCalled();
     });
 
+    it('should initialize the editor and add a keydown event listener that early exists by default', () => {
+      editor = new DateEditor(editorArguments);
+
+      const event = new KeyboardEvent('keydown', { key: 'Enter' });
+      editor.editorDomElement.dispatchEvent(event);
+
+      expect(editor.columnEditor.editorOptions?.allowEdit).toBeFalsy();
+      expect(editor.isValueTouched()).toBeFalsy();
+    });
+
+    it('should stop propagation on allowEdit when hitting left or right arrow keys', () => {
+      editor = new DateEditor({ ...editorArguments,
+        column: { ...editorArguments.column,
+          editor: { ...editorArguments.column.editor,
+            editorOptions: { ...editorArguments.column?.editor?.editorOptions, allowEdit: true }
+           }}});
+
+      let event = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+      let propagationSpy = vi.spyOn(event, 'stopImmediatePropagation');
+      editor.editorDomElement.dispatchEvent(event);
+      expect(propagationSpy).toHaveBeenCalled();
+
+      event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+      propagationSpy = vi.spyOn(event, 'stopImmediatePropagation');
+      editor.editorDomElement.dispatchEvent(event);
+      expect(propagationSpy).toHaveBeenCalled();
+    });
+
     it('should have a placeholder when defined in its column definition', () => {
       const testValue = 'test placeholder';
       mockColumn.editor!.placeholder = testValue;
@@ -267,6 +295,23 @@ describe('DateEditor', () => {
         expect(editor.isValueTouched()).toBe(true);
       });
 
+      it('should return True when the last key was enter and alwaysSaveOnEnterKey is active', () => {
+        mockItemData = { id: 1, startDate: '2001-01-02T11:02:02.000Z', isActive: true };
+
+        editor = new DateEditor({...editorArguments,
+          column: { ...mockColumn, editor: { ...editorArguments.column.editor, alwaysSaveOnEnterKey: true,
+            editorOptions: { ...editorArguments.column.editor?.editorOptions, allowEdit: true}
+           } }
+        });
+        const event = new KeyboardEvent('keydown', { key: 'Enter' });
+        vi.runAllTimers();
+
+        editor.editorDomElement.dispatchEvent(event);
+
+        expect(editor.isValueChanged()).toBe(true);
+
+      });
+
       it('should return True when date is reset by the clear date button', () => {
         mockItemData = { id: 1, startDate: '2001-01-02T11:02:02.000Z', isActive: true };
 

packages/common/src/editors/dateEditor.ts

@@ -186,7 +186,7 @@ export class DateEditor implements Editor {
           title: this.columnEditor && this.columnEditor.title || '',
           className: inputCssClasses.replace(/\./g, ' '),
           dataset: { input: '', defaultdate: this.defaultDate },
-          readOnly: this.columnEditor.readOnly === false ? false : true,
+          readOnly: this.columnEditor.editorOptions?.allowEdit === true ? true : false,
         },
         this._editorInputGroupElm
       );
@@ -204,7 +204,7 @@ export class DateEditor implements Editor {
       }
 
       this._bindEventService.bind(this._inputElm, 'keydown', ((event: KeyboardEvent) => {
-        if (this.columnEditor.readOnly !== false) {
+        if (this.columnEditor.editorOptions?.allowEdit !== true) {
           return;
         }
 
@@ -363,7 +363,8 @@ export class DateEditor implements Editor {
     const elmDateStr = this.getValue();
 
     const lastEventKey = this._lastInputKeyEvent?.key;
-    if (this.columnEditor.readOnly === false && this.columnEditor?.alwaysSaveOnEnterKey && lastEventKey === 'Enter') {
+    if (this.columnEditor.editorOptions?.allowEdit === true &&
+        this.columnEditor?.alwaysSaveOnEnterKey && lastEventKey === 'Enter') {
       return true;
     }
 

packages/common/src/interfaces/columnEditor.interface.ts

@@ -128,11 +128,6 @@ export interface ColumnEditor {
    */
   required?: boolean;
 
-  /**
-   * only applicable for dateEditors. If explicitely set to false, it will allow to enter a new date in the input field.
-   */
-  readOnly?: boolean;
-
   /**
    * defaults to 'object', how do we want to serialize the editor value to the resulting dataContext object when using a complex object?
    * Currently only applies to Single/Multiple Select Editor.

packages/common/src/interfaces/vanillaCalendarOption.interface.ts

@@ -12,4 +12,7 @@ export interface VanillaCalendarOption extends IPartialSettings {
 
   /** defaults to false, do we want to hide the clear date button? */
   hideClearButton?: boolean;
+
+  /** defaults to false, should keyboard entries be allowed in input field? */
+  allowInput?: boolean;
 }