Skip to content

Commit

Permalink
stop using keypress (#960)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nielslyngsoe
nielslyngsoe authored Nov 19, 2024
1 parent 4b814df commit 16eea44
Show file tree
Hide file tree
Showing 8 changed files with 27 additions and 31 deletions.
4 changes: 2 additions & 2 deletions packages/uui-boolean-input/lib/uui-boolean-input.element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
4 changes: 2 additions & 2 deletions packages/uui-boolean-input/lib/uui-boolean-input.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/uui-input/lib/uui-input.element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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();
}
Expand Down
18 changes: 7 additions & 11 deletions packages/uui-input/lib/uui-input.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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'));

Expand All @@ -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;
});
Expand Down Expand Up @@ -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;
Expand All @@ -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);

Expand Down
4 changes: 2 additions & 2 deletions packages/uui-range-slider/lib/uui-range-slider.element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,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
Expand Down Expand Up @@ -452,7 +452,7 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {

/** Events */

private _onKeypress = (e: KeyboardEvent) => {
#onKeyDown = (e: KeyboardEvent) => {
if (e.key == 'Enter') {
this.submit();
}
Expand Down
12 changes: 6 additions & 6 deletions packages/uui-range-slider/lib/uui-range-slider.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@ 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;
expect(event.type).to.equal(UUIRangeSliderEvent.CHANGE);
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;
Expand All @@ -96,15 +96,15 @@ 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;
expect(event.type).to.equal(UUIRangeSliderEvent.INPUT);
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;
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/uui-slider/lib/uui-slider.element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,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);
}

/**
Expand Down Expand Up @@ -236,7 +236,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();
}
Expand Down
8 changes: 4 additions & 4 deletions packages/uui-slider/lib/uui-slider.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'));

Expand All @@ -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'));

Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 16eea44

Please sign in to comment.