From d2560a6a63c2e8a89e848acc7ca10cc66279ab19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Nov 2024 15:29:32 +0100 Subject: [PATCH] stop using keypress --- .../lib/uui-boolean-input.element.ts | 4 ++-- .../lib/uui-boolean-input.test.ts | 4 ++-- packages/uui-input/lib/uui-input.element.ts | 4 ++-- packages/uui-input/lib/uui-input.test.ts | 18 +++++++----------- .../lib/uui-range-slider.element.ts | 4 ++-- .../lib/uui-range-slider.test.ts | 12 ++++++------ packages/uui-slider/lib/uui-slider.element.ts | 4 ++-- packages/uui-slider/lib/uui-slider.test.ts | 8 ++++---- 8 files changed, 27 insertions(+), 31 deletions(-) diff --git a/packages/uui-boolean-input/lib/uui-boolean-input.element.ts b/packages/uui-boolean-input/lib/uui-boolean-input.element.ts index fd1ce1eaa..86000050a 100644 --- a/packages/uui-boolean-input/lib/uui-boolean-input.element.ts +++ b/packages/uui-boolean-input/lib/uui-boolean-input.element.ts @@ -114,14 +114,14 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin( this._value = 'on'; } this.inputRole = inputRole; - this.addEventListener('keypress', this._onKeypress); + this.addEventListener('keydown', this.#onKeyDown); } protected getFormElement(): HTMLInputElement { return this._input; } - private _onKeypress(e: KeyboardEvent): void { + #onKeyDown(e: KeyboardEvent): void { if (e.key == 'Enter') { this.submit(); } diff --git a/packages/uui-boolean-input/lib/uui-boolean-input.test.ts b/packages/uui-boolean-input/lib/uui-boolean-input.test.ts index 2a81274e7..45935baa9 100644 --- a/packages/uui-boolean-input/lib/uui-boolean-input.test.ts +++ b/packages/uui-boolean-input/lib/uui-boolean-input.test.ts @@ -128,8 +128,8 @@ describe('BooleanInputBaseElement in a Form', () => { describe('submit', () => { it('should submit when pressing enter', async () => { - const listener = oneEvent(formElement, 'submit', false); - element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const listener = oneEvent(formElement, 'submit'); + element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); const event = await listener; expect(event).to.exist; diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts index 72470bdf0..7a7d808b9 100644 --- a/packages/uui-input/lib/uui-input.element.ts +++ b/packages/uui-input/lib/uui-input.element.ts @@ -212,7 +212,7 @@ export class UUIInputElement extends UUIFormControlMixin( this.addEventListener('blur', () => { this.style.setProperty('--uui-show-focus-outline', ''); }); - this.addEventListener('keypress', this._onKeypress); + this.addEventListener('keydown', this.#onKeyDown); this.addValidator( 'tooShort', @@ -230,7 +230,7 @@ export class UUIInputElement extends UUIFormControlMixin( }); } - private _onKeypress(e: KeyboardEvent): void { + #onKeyDown(e: KeyboardEvent): void { if (this.type !== 'color' && e.key == 'Enter') { this.submit(); } diff --git a/packages/uui-input/lib/uui-input.test.ts b/packages/uui-input/lib/uui-input.test.ts index adbf05b44..8118f5f08 100644 --- a/packages/uui-input/lib/uui-input.test.ts +++ b/packages/uui-input/lib/uui-input.test.ts @@ -99,7 +99,7 @@ describe('UuiInputElement', () => { describe('events', () => { describe('focus', () => { it('emits a focus event when focused', async () => { - const listener = oneEvent(element, 'focus', false); + const listener = oneEvent(element, 'focus'); element.focus(); const event = await listener; expect(event).to.exist; @@ -108,7 +108,7 @@ describe('UuiInputElement', () => { }); describe('change', () => { it('emits a change event when native input fires one', async () => { - const listener = oneEvent(element, UUIInputEvent.CHANGE, false); + const listener = oneEvent(element, UUIInputEvent.CHANGE); input.dispatchEvent(new Event('change')); @@ -133,11 +133,7 @@ describe('UuiInputElement', () => { 'input', ) as HTMLInputElement; - const innerListener = oneEvent( - innerElement!, - UUIInputEvent.CHANGE, - false, - ); + const innerListener = oneEvent(innerElement!, UUIInputEvent.CHANGE); outerElement!.addEventListener(UUIInputEvent.CHANGE, () => { outerEventTriggered = true; }); @@ -208,8 +204,8 @@ describe('UuiInput in Form', () => { describe('submit', () => { it('should submit when pressing enter', async () => { - const listener = oneEvent(formElement, 'submit', false); - element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const listener = oneEvent(formElement, 'submit'); + element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); const event = await listener; expect(event).to.exist; @@ -223,11 +219,11 @@ describe('UuiInput in Form', () => { let isFulfilled = false; - const listener = oneEvent(formElement, 'submit', false); + const listener = oneEvent(formElement, 'submit'); listener.then(() => (isFulfilled = true)); - element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); await sleep(100); diff --git a/packages/uui-range-slider/lib/uui-range-slider.element.ts b/packages/uui-range-slider/lib/uui-range-slider.element.ts index 19702e2d0..cbf76df5e 100644 --- a/packages/uui-range-slider/lib/uui-range-slider.element.ts +++ b/packages/uui-range-slider/lib/uui-range-slider.element.ts @@ -299,7 +299,7 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') { constructor() { super(); // Keyboard - this.addEventListener('keypress', this._onKeypress); + this.addEventListener('keydown', this.#onKeyDown); // Mouse this.addEventListener('mousedown', this._onMouseDown); // Touch @@ -447,7 +447,7 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') { /** Events */ - private _onKeypress = (e: KeyboardEvent) => { + #onKeyDown = (e: KeyboardEvent) => { if (e.key == 'Enter') { this.submit(); } diff --git a/packages/uui-range-slider/lib/uui-range-slider.test.ts b/packages/uui-range-slider/lib/uui-range-slider.test.ts index c4a6cf2cc..d9185e0a7 100644 --- a/packages/uui-range-slider/lib/uui-range-slider.test.ts +++ b/packages/uui-range-slider/lib/uui-range-slider.test.ts @@ -78,7 +78,7 @@ describe('UUIRangeSliderElement', () => { describe('events', () => { describe('change', () => { it('emits a change event from inputLow when native input fires one', async () => { - const listener = oneEvent(element, UUIRangeSliderEvent.CHANGE, false); + const listener = oneEvent(element, UUIRangeSliderEvent.CHANGE); inputLow.dispatchEvent(new Event('change')); const event = await listener; expect(event).to.exist; @@ -86,7 +86,7 @@ describe('UUIRangeSliderElement', () => { expect(event!.target).to.equal(element); }); it('emits a change event from inputHigh when native input fires one', async () => { - const listener = oneEvent(element, UUIRangeSliderEvent.CHANGE, false); + const listener = oneEvent(element, UUIRangeSliderEvent.CHANGE); inputHigh.dispatchEvent(new Event('change')); const event = await listener; expect(event).to.exist; @@ -96,7 +96,7 @@ describe('UUIRangeSliderElement', () => { }); describe('input', () => { it('emits an input event from inputLow when native input fires one', async () => { - const listener = oneEvent(element, UUIRangeSliderEvent.INPUT, false); + const listener = oneEvent(element, UUIRangeSliderEvent.INPUT); inputLow.dispatchEvent(new Event('input')); const event = await listener; expect(event).to.exist; @@ -104,7 +104,7 @@ describe('UUIRangeSliderElement', () => { expect(event!.target).to.equal(element); }); it('emits an input event from inputHigh when native input fires one', async () => { - const listener = oneEvent(element, UUIRangeSliderEvent.INPUT, false); + const listener = oneEvent(element, UUIRangeSliderEvent.INPUT); inputHigh.dispatchEvent(new Event('input')); const event = await listener; expect(event).to.exist; @@ -164,8 +164,8 @@ describe('UUIRangeSlider in a form', () => { describe('submit', () => { it('should submit when pressing enter', async () => { - const listener = oneEvent(formElement, 'submit', false); - element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const listener = oneEvent(formElement, 'submit'); + element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); const event = await listener; expect(event).to.exist; diff --git a/packages/uui-slider/lib/uui-slider.element.ts b/packages/uui-slider/lib/uui-slider.element.ts index dd1f750a9..328329b39 100644 --- a/packages/uui-slider/lib/uui-slider.element.ts +++ b/packages/uui-slider/lib/uui-slider.element.ts @@ -188,7 +188,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') { this.addEventListener('blur', () => { this.style.setProperty('--uui-show-focus-outline', ''); }); - this.addEventListener('keypress', this._onKeypress); + this.addEventListener('keydown', this.#onKeyDown); } /** @@ -264,7 +264,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') { this._stepWidth = this._calculateStepWidth(); }; - private _onKeypress(e: KeyboardEvent): void { + #onKeyDown(e: KeyboardEvent): void { if (e.key == 'Enter') { this.submit(); } diff --git a/packages/uui-slider/lib/uui-slider.test.ts b/packages/uui-slider/lib/uui-slider.test.ts index 5fd59efa2..cf52c58bc 100644 --- a/packages/uui-slider/lib/uui-slider.test.ts +++ b/packages/uui-slider/lib/uui-slider.test.ts @@ -73,7 +73,7 @@ describe('UuiSlider', () => { describe('events', () => { describe('change', () => { it('emits a change event when native input fires one', async () => { - const listener = oneEvent(element, UUISliderEvent.CHANGE, false); + const listener = oneEvent(element, UUISliderEvent.CHANGE); input.dispatchEvent(new Event('change')); @@ -85,7 +85,7 @@ describe('UuiSlider', () => { }); describe('input', () => { it('emits a input event when native input fires one', async () => { - const listener = oneEvent(element, UUISliderEvent.INPUT, false); + const listener = oneEvent(element, UUISliderEvent.INPUT); input.dispatchEvent(new Event('input')); @@ -150,8 +150,8 @@ describe('UuiSlider in Form', () => { describe('submit', () => { it('should submit when pressing enter', async () => { - const listener = oneEvent(formElement, 'submit', false); - element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const listener = oneEvent(formElement, 'submit'); + element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); const event = await listener; expect(event).to.exist;