Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: stop using keypress #960

Merged
merged 1 commit into from
Nov 19, 2024
Merged

Feat: stop using keypress #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/uui-boolean-input/lib/uui-boolean-input.element.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -447,7 +447,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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

/**
Expand Down Expand Up @@ -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();
}
Expand Down
8 changes: 4 additions & 4 deletions packages/uui-slider/lib/uui-slider.test.ts
View file
Open in desktop
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
Loading