feat: home and end key stop propagation in editors

#1686
ghiscoding · Sep 23, 2024 · d143820 · d143820
1 parent 8318853
commit d143820
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 141 deletions.
diff --git a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts
@@ -196,30 +196,19 @@ describe('AutocompleterEditor', () => {
       expect(editor.getValue()).toBe('male');
     });
 
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Left Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
+    ["ArrowLeft", "ArrowRight", "Home", "End"].forEach((key: string) => {
+      it(`should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using ${key} key`, () => {
+        const event = new (window.window as any).KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+        const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
 
-      editor = new AutocompleterEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-gender') as HTMLInputElement;
-
-      editorElm.focus();
-      editorElm.dispatchEvent(event);
-
-      expect(spyEvent).toHaveBeenCalled();
-    });
-
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Right Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
-
-      editor = new AutocompleterEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-gender') as HTMLInputElement;
+        editor = new AutocompleterEditor(editorArguments);
+        const editorElm = divContainer.querySelector('input.editor-gender') as HTMLInputElement;
 
-      editorElm.focus();
-      editorElm.dispatchEvent(event);
+        editorElm.focus();
+        editorElm.dispatchEvent(event);
 
-      expect(spyEvent).toHaveBeenCalled();
+        expect(spyEvent).toHaveBeenCalled();
+      });
     });
 
     it('should render the DOM element with different key/value pair when user provide its own customStructure', () => {

diff --git a/packages/common/src/editors/__tests__/dateEditor.spec.ts b/packages/common/src/editors/__tests__/dateEditor.spec.ts
@@ -167,6 +167,16 @@ describe('DateEditor', () => {
       propagationSpy = vi.spyOn(event, 'stopImmediatePropagation');
       editor.editorDomElement.dispatchEvent(event);
       expect(propagationSpy).toHaveBeenCalled();
+
+      event = new KeyboardEvent('keydown', { key: 'Home' });
+      propagationSpy = vi.spyOn(event, 'stopImmediatePropagation');
+      editor.editorDomElement.dispatchEvent(event);
+      expect(propagationSpy).toHaveBeenCalled();
+
+      event = new KeyboardEvent('keydown', { key: 'End' });
+      propagationSpy = vi.spyOn(event, 'stopImmediatePropagation');
+      editor.editorDomElement.dispatchEvent(event);
+      expect(propagationSpy).toHaveBeenCalled();
     });
 
     it('should have a placeholder when defined in its column definition', () => {

diff --git a/packages/common/src/editors/__tests__/dualInputEditor.spec.ts b/packages/common/src/editors/__tests__/dualInputEditor.spec.ts
@@ -205,31 +205,20 @@ describe('DualInputEditor', () => {
       expect(editor.getValues()).toEqual({ from: 1, to: 22 });
     });
 
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Left Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
+    ["ArrowLeft", "ArrowRight", "Home", "End"].forEach((key: string) => {
+      it(`should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using ${key} key`, () => {
+        const event = new (window.window as any).KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+        const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
 
-      editor = new DualInputEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-range') as HTMLInputElement;
-
-      editor.focus();
-      editorElm.dispatchEvent(event);
-
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
-    });
-
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Right Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
-
-      editor = new DualInputEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-range') as HTMLInputElement;
+        editor = new DualInputEditor(editorArguments);
+        const editorElm = divContainer.querySelector('input.editor-range') as HTMLInputElement;
 
-      editor.focus();
-      editorElm.dispatchEvent(event);
+        editor.focus();
+        editorElm.dispatchEvent(event);
 
-      expect(spyEvent).toHaveBeenCalled();
+        expect(gridStub.focus).toHaveBeenCalled();
+        expect(spyEvent).toHaveBeenCalled();
+      });
     });
 
     describe('isValueChanged method (and isValueTouched method will always true for all since we trigger events in all)', () => {

diff --git a/packages/common/src/editors/__tests__/floatEditor.spec.ts b/packages/common/src/editors/__tests__/floatEditor.spec.ts
@@ -169,32 +169,20 @@ describe('FloatEditor', () => {
       expect(editor.getValue()).toBe('213');
     });
 
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Left Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
+    ["ArrowLeft", "ArrowRight", "Home", "End"].forEach((key: string) => {
+      it(`should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using ${key} key`, () => {
+        const event = new (window.window as any).KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+        const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
 
-      editor = new FloatEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-price') as HTMLInputElement;
-
-      editor.focus();
-      editorElm.dispatchEvent(event);
-
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
-    });
-
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Right Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
-
-      editor = new FloatEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-price') as HTMLInputElement;
+        editor = new FloatEditor(editorArguments);
+        const editorElm = divContainer.querySelector('input.editor-price') as HTMLInputElement;
 
-      editor.focus();
-      editorElm.dispatchEvent(event);
+        editor.focus();
+        editorElm.dispatchEvent(event);
 
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
+        expect(gridStub.focus).toHaveBeenCalled();
+        expect(spyEvent).toHaveBeenCalled();
+      });
     });
 
     describe('isValueChanged method', () => {

diff --git a/packages/common/src/editors/__tests__/inputEditor.spec.ts b/packages/common/src/editors/__tests__/inputEditor.spec.ts
@@ -178,33 +178,21 @@ describe('InputEditor (TextEditor)', () => {
       expect(editor.getValue()).toBe('task 1');
     });
 
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Left Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
+    ["ArrowLeft", "ArrowRight", "Home", "End"].forEach((key: string) => {
+      it(`should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using ${key} key`, () => {
+        const event = new (window.window as any).KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+        const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
 
-      editor = new InputEditor(editorArguments, 'text');
-      const editorElm = divContainer.querySelector('input.editor-title') as HTMLInputElement;
-
-      editor.focus();
-      editorElm.dispatchEvent(event);
-
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
-      expect(editor.isValueTouched()).toBe(true);
-    });
-
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Right Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
-
-      editor = new InputEditor(editorArguments, 'text');
-      const editorElm = divContainer.querySelector('input.editor-title') as HTMLInputElement;
+        editor = new InputEditor(editorArguments, 'text');
+        const editorElm = divContainer.querySelector('input.editor-title') as HTMLInputElement;
 
-      editor.focus();
-      editorElm.dispatchEvent(event);
+        editor.focus();
+        editorElm.dispatchEvent(event);
 
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
+        expect(gridStub.focus).toHaveBeenCalled();
+        expect(spyEvent).toHaveBeenCalled();
+        expect(editor.isValueTouched()).toBe(true);
+      });
     });
 
     describe('isValueChanged method', () => {

diff --git a/packages/common/src/editors/__tests__/inputPasswordEditor.spec.ts b/packages/common/src/editors/__tests__/inputPasswordEditor.spec.ts
@@ -178,33 +178,21 @@ describe('InputPasswordEditor', () => {
       expect(editor.getValue()).toBe('task 1');
     });
 
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Left Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
+    ["ArrowLeft", "ArrowRight", "Home", "End"].forEach((key: string) => {
+      it(`should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using ${key} key`, () => {
+        const event = new (window.window as any).KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+        const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
 
-      editor = new InputPasswordEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-title') as HTMLInputElement;
-
-      editor.focus();
-      editorElm.dispatchEvent(event);
-
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
-      expect(editor.isValueTouched()).toBe(true);
-    });
-
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Right Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
-
-      editor = new InputPasswordEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-title') as HTMLInputElement;
+        editor = new InputPasswordEditor(editorArguments);
+        const editorElm = divContainer.querySelector('input.editor-title') as HTMLInputElement;
 
-      editor.focus();
-      editorElm.dispatchEvent(event);
+        editor.focus();
+        editorElm.dispatchEvent(event);
 
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
+        expect(gridStub.focus).toHaveBeenCalled();
+        expect(spyEvent).toHaveBeenCalled();
+        expect(editor.isValueTouched()).toBe(true);
+      });
     });
 
     describe('isValueChanged method', () => {

diff --git a/packages/common/src/editors/__tests__/integerEditor.spec.ts b/packages/common/src/editors/__tests__/integerEditor.spec.ts
@@ -171,32 +171,20 @@ describe('IntegerEditor', () => {
       expect(editor.getValue()).toBe('213');
     });
 
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Left Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
+    ["ArrowLeft", "ArrowRight", "Home", "End"].forEach((key: string) => {
+      it(`should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using ${key} key`, () => {
+        const event = new (window.window as any).KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+        const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
 
-      editor = new IntegerEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-price') as HTMLInputElement;
-
-      editor.focus();
-      editorElm.dispatchEvent(event);
-
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
-    });
-
-    it('should dispatch a keyboard event and expect "stopImmediatePropagation()" to have been called when using Right Arrow key', () => {
-      const event = new (window.window as any).KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
-      const spyEvent = vi.spyOn(event, 'stopImmediatePropagation');
-
-      editor = new IntegerEditor(editorArguments);
-      const editorElm = divContainer.querySelector('input.editor-price') as HTMLInputElement;
+        editor = new IntegerEditor(editorArguments);
+        const editorElm = divContainer.querySelector('input.editor-price') as HTMLInputElement;
 
-      editor.focus();
-      editorElm.dispatchEvent(event);
+        editor.focus();
+        editorElm.dispatchEvent(event);
 
-      expect(gridStub.focus).toHaveBeenCalled();
-      expect(spyEvent).toHaveBeenCalled();
+        expect(gridStub.focus).toHaveBeenCalled();
+        expect(spyEvent).toHaveBeenCalled();
+      });
     });
 
     describe('isValueChanged method', () => {

diff --git a/packages/common/src/editors/autocompleterEditor.ts b/packages/common/src/editors/autocompleterEditor.ts
@@ -555,7 +555,7 @@ export class AutocompleterEditor<T extends AutocompleteItem = any> implements Ed
     this._bindEventService.bind(this._inputElm, 'focus', () => this._inputElm?.select());
     this._bindEventService.bind(this._inputElm, 'keydown', ((event: KeyboardEvent & { target: HTMLInputElement; }) => {
       this._lastInputKeyEvent = event;
-      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === "Home" || event.key === "End") {
         event.stopImmediatePropagation();
       }
 

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -210,7 +210,7 @@ export class DateEditor implements Editor {
 
         this._isValueTouched = true;
         this._lastInputKeyEvent = event;
-        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight'  || event.key === "Home" || event.key === "End") {
           event.stopImmediatePropagation();
         }
       }) as EventListener);

diff --git a/packages/common/src/editors/dualInputEditor.ts b/packages/common/src/editors/dualInputEditor.ts
@@ -159,7 +159,7 @@ export class DualInputEditor implements Editor {
       this._isRightValueTouched = true;
     }
     this._lastInputKeyEvent = event;
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Tab') {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === "Home" || event.key === "End" || event.key === 'Tab') {
       event.stopImmediatePropagation();
     }
   }

diff --git a/packages/common/src/editors/inputEditor.ts b/packages/common/src/editors/inputEditor.ts
@@ -115,7 +115,7 @@ export class InputEditor implements Editor {
     this._bindEventService.bind(this._input, 'keydown', ((event: KeyboardEvent) => {
       this._isValueTouched = true;
       this._lastInputKeyEvent = event;
-      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === "Home" || event.key === "End") {
         event.stopImmediatePropagation();
       }
     }) as EventListener);