diff --git a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts index 980ca9d79..eddedbe2e 100644 --- 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 index e0565c8f6..1f390a44a 100644 --- 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 index 6966ab740..08ca8f443 100644 --- 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 index bf18dc71e..0bb4f1506 100644 --- 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 index 6a870f88f..8d7ad95c0 100644 --- 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 index 8d22016f6..e1d90df49 100644 --- 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 index 35af5871d..e45deaf64 100644 --- 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 index bbee48bc6..0fb26c853 100644 --- a/packages/common/src/editors/autocompleterEditor.ts +++ b/packages/common/src/editors/autocompleterEditor.ts @@ -555,7 +555,7 @@ export class AutocompleterEditor 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 index e073d80e3..404c45efb 100644 --- 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 index 61f41ab61..2329ed495 100644 --- 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 index e478c0924..5a7733c12 100644 --- 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);