Skip to content

Commit

Permalink
fix: change key checks to use code instead of key
Browse files Browse the repository at this point in the history
  • Loading branch information
@logaretm
logaretm committed Aug 20, 2024
1 parent a28a071 commit 514e16d
Show file tree
Hide file tree
Showing 15 changed files with 255 additions and 101 deletions.
4 changes: 2 additions & 2 deletions packages/core/src/useCheckbox/useCheckbox.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,9 @@ describe('value toggling on space key', () => {
});

expect(screen.getByTestId('value')).toHaveTextContent('');
await fireEvent.keyDown(screen.getByLabelText('First'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('First'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('true');
await fireEvent.keyDown(screen.getByLabelText('First'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('First'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('false');
});

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/useCheckbox/useCheckbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function useCheckbox<TValue = string>(
return;
}

if (e.key === 'Space') {
if (e.code === 'Space') {
e.preventDefault();
toggleValue();
setTouched(true);
Expand Down
12 changes: 6 additions & 6 deletions packages/core/src/useCheckbox/useCheckboxGroup.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,11 +160,11 @@ describe('Space key toggles the values', () => {
`,
});

await fireEvent.keyDown(screen.getByLabelText('First'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('First'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('[ "1" ]');
await fireEvent.keyDown(screen.getByLabelText('Second'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('Second'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('[ "1", "2" ]');
await fireEvent.keyDown(screen.getByLabelText('Second'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('Second'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('[ "1" ]');
});

Expand All @@ -182,11 +182,11 @@ describe('Space key toggles the values', () => {
`,
});

await fireEvent.keyDown(screen.getByLabelText('First'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('First'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('[ "1" ]');
await fireEvent.keyDown(screen.getByLabelText('Second'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('Second'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('[ "1", "2" ]');
await fireEvent.keyDown(screen.getByLabelText('Second'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('Second'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('[ "1" ]');
});
});
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/useNumberField/useNumberField.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,9 @@ test('change event updates the value and parses it as a number', async () => {

test('arrow up and down should increment and decrement the value', async () => {
await render(makeTest());
await fireEvent.keyDown(screen.getByLabelText(label), { key: 'ArrowUp' });
await fireEvent.keyDown(screen.getByLabelText(label), { code: 'ArrowUp' });
expect(screen.getByLabelText(label)).toHaveDisplayValue('1');
await fireEvent.keyDown(screen.getByLabelText(label), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText(label), { code: 'ArrowDown' });
expect(screen.getByLabelText(label)).toHaveDisplayValue('0');
});

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/useRadio/useRadio.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function useRadio<TValue = string>(
return;
}

if (e.key === 'Space') {
if (e.code === 'Space') {
e.preventDefault();
group?.setValue(toValue(props.value) as TValue);
group?.setTouched(true);
Expand Down
70 changes: 35 additions & 35 deletions packages/core/src/useRadio/useRadioGroup.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,9 +155,9 @@ describe('Space key selects the radio', () => {
`,
});

await fireEvent.keyDown(screen.getByLabelText('First'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('First'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.click(screen.getByLabelText('Second'), { key: 'Space' });
await fireEvent.click(screen.getByLabelText('Second'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
});

Expand All @@ -175,9 +175,9 @@ describe('Space key selects the radio', () => {
`,
});

await fireEvent.keyDown(screen.getByLabelText('First'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('First'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.click(screen.getByLabelText('Second'), { key: 'Space' });
await fireEvent.click(screen.getByLabelText('Second'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
});

Expand All @@ -195,9 +195,9 @@ describe('Space key selects the radio', () => {
`,
});

await fireEvent.keyDown(screen.getByLabelText('First'), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText('First'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('');
await fireEvent.click(screen.getByLabelText('Second'), { key: 'Space' });
await fireEvent.click(screen.getByLabelText('Second'), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('');
});
});
Expand All @@ -223,44 +223,44 @@ describe('Arrow keys behavior', () => {
test('arrow down moves forward', async () => {
await renderTest();

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('3');
});

test('arrow up moves backward', async () => {
await renderTest();

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowUp' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowUp' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowUp' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowUp' });
expect(screen.getByTestId('value')).toHaveTextContent('3');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowUp' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowUp' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
});

test('arrow right moves forward', async () => {
await renderTest();

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowRight' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowRight' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowRight' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowRight' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowRight' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowRight' });
expect(screen.getByTestId('value')).toHaveTextContent('3');
});

test('arrow left moves backward', async () => {
await renderTest();

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowLeft' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowLeft' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowLeft' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowLeft' });
expect(screen.getByTestId('value')).toHaveTextContent('3');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowLeft' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowLeft' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
});
});
Expand All @@ -285,44 +285,44 @@ describe('Arrow keys behavior', () => {
test('arrow down moves forward', async () => {
await renderTest();

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('3');
});

test('arrow up moves backward', async () => {
await renderTest();

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowUp' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowUp' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowUp' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowUp' });
expect(screen.getByTestId('value')).toHaveTextContent('3');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowUp' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowUp' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
});

test('arrow left moves forward', async () => {
await renderTest();

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowLeft' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowLeft' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowLeft' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowLeft' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowLeft' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowLeft' });
expect(screen.getByTestId('value')).toHaveTextContent('3');
});

test('arrow right moves backward', async () => {
await renderTest();

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowRight' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowRight' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowRight' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowRight' });
expect(screen.getByTestId('value')).toHaveTextContent('3');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowRight' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowRight' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
});
});
Expand All @@ -342,11 +342,11 @@ describe('Arrow keys behavior', () => {
`,
});

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('2');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('1');
});

Expand All @@ -365,9 +365,9 @@ describe('Arrow keys behavior', () => {
`,
});

await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('');
await fireEvent.keyDown(screen.getByLabelText('Group'), { key: 'ArrowDown' });
await fireEvent.keyDown(screen.getByLabelText('Group'), { code: 'ArrowDown' });
expect(screen.getByTestId('value')).toHaveTextContent('');
});
});
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/useRadio/useRadioGroup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,15 +154,15 @@ export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProp

const { next, prev } = getOrientationArrows(toValue(props.dir));

if (next.includes(e.key)) {
if (next.includes(e.code)) {
e.preventDefault();
handleArrowNext();
setTouched(true);

return;
}

if (prev.includes(e.key)) {
if (prev.includes(e.code)) {
e.preventDefault();
handleArrowPrevious();
setTouched(true);
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/useSearchField/useSearchField.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ test('Enter key submit the value using the onSubmit prop', async () => {
const value = 'Best keyboard';
await flush();
await fireEvent.update(screen.getByLabelText(label), value);
await fireEvent.keyDown(screen.getByLabelText(label), { key: 'Enter' });
await fireEvent.keyDown(screen.getByLabelText(label), { code: 'Enter' });
expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenLastCalledWith(value);
});
Expand Down Expand Up @@ -141,7 +141,7 @@ test('Escape key clears the value', async () => {
await flush();
await fireEvent.update(screen.getByLabelText(label), value);
expect(screen.getByLabelText(label)).toHaveDisplayValue(value);
await fireEvent.keyDown(screen.getByLabelText(label), { key: 'Escape' });
await fireEvent.keyDown(screen.getByLabelText(label), { code: 'Escape' });
expect(screen.getByLabelText(label)).toHaveDisplayValue('');
});

Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/useSearchField/useSearchField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,15 +112,15 @@ export function useSearchField(
setTouched(true);
},
onKeydown(e: KeyboardEvent) {
if (e.key === 'Escape') {
if (e.code === 'Escape') {
e.preventDefault();
setValue('');
setTouched(true);
updateValidity();
return;
}

if (e.key === 'Enter' && !inputRef.value?.form && props.onSubmit) {
if (e.code === 'Enter' && !inputRef.value?.form && props.onSubmit) {
e.preventDefault();
setTouched(true);
if (isValid.value) {
Expand Down
12 changes: 6 additions & 6 deletions packages/core/src/useSpinButton/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,13 @@ export function useSpinButton(_props: Reactivify<SpinButtonProps, 'onChange'>) {
return;
}

if (e.key === 'PageUp') {
if (e.code === 'PageUp') {
e.preventDefault();
pageIncrement();
return;
}

if (e.key === 'PageDown') {
if (e.code === 'PageDown') {
e.preventDefault();
pageDecrement();
return;
Expand All @@ -93,26 +93,26 @@ export function useSpinButton(_props: Reactivify<SpinButtonProps, 'onChange'>) {
toValue(props.dir) || direction.value,
);

if (incrKeys.includes(e.key)) {
if (incrKeys.includes(e.code)) {
e.preventDefault();
increment();
return;
}

if (decrKeys.includes(e.key)) {
if (decrKeys.includes(e.code)) {
e.preventDefault();
decrement();
return;
}

if (e.key === 'Home') {
if (e.code === 'Home') {
e.preventDefault();
incrementToMax();

return;
}

if (e.key === 'End') {
if (e.code === 'End') {
e.preventDefault();
decrementToMin();
return;
Expand Down
8 changes: 4 additions & 4 deletions packages/core/src/useSwitch/useSwitch.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ describe('with input as base element', () => {

expect(screen.getByTestId('value')).toHaveTextContent('false');
expect(screen.getByLabelText(label)).not.toBeChecked();
await fireEvent.keyDown(screen.getByLabelText(label), { key: 'Enter' });
await fireEvent.keyDown(screen.getByLabelText(label), { code: 'Enter' });
expect(screen.getByTestId('value')).toHaveTextContent('true');
expect(screen.getByLabelText(label)).toBeChecked();
await fireEvent.keyDown(screen.getByLabelText(label), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText(label), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('false');
expect(screen.getByLabelText(label)).not.toBeChecked();
});
Expand Down Expand Up @@ -271,10 +271,10 @@ describe('with custom base element', () => {

expect(screen.getByTestId('value')).toHaveTextContent('false');
expect(screen.getByLabelText(label)).toHaveAttribute('aria-checked', 'false');
await fireEvent.keyDown(screen.getByLabelText(label), { key: 'Enter' });
await fireEvent.keyDown(screen.getByLabelText(label), { code: 'Enter' });
expect(screen.getByTestId('value')).toHaveTextContent('true');
expect(screen.getByLabelText(label)).toHaveAttribute('aria-checked', 'true');
await fireEvent.keyDown(screen.getByLabelText(label), { key: 'Space' });
await fireEvent.keyDown(screen.getByLabelText(label), { code: 'Space' });
expect(screen.getByTestId('value')).toHaveTextContent('false');
expect(screen.getByLabelText(label)).toHaveAttribute('aria-checked', 'false');
});
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/useSwitch/useSwitch.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function useSwitch(_props: Reactivify<SwitchProps, 'schema'>, elementRef?

const handlers: InputEvents = {
onKeydown: (evt: KeyboardEvent) => {
if (evt.key === 'Space' || evt.key === 'Enter') {
if (evt.code === 'Space' || evt.code === 'Enter') {
evt.preventDefault();
togglePressed();
setTouched(true);
Expand Down
Loading

0 comments on commit 514e16d

Please sign in to comment.