diff --git a/README.md b/README.md index ae722a49..e2091473 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,6 @@ change the state of the checkbox. - - [Installation](#installation) - [API](#api) - [`click(element, eventInit, options)`](#clickelement-eventinit-options) @@ -202,6 +201,8 @@ The following special character strings are supported: | `{arrowright}` | ArrowRight | N/A | | | `{arrowup}` | ArrowUp | N/A | | | `{arrowdown}` | ArrowDown | N/A | | +| `{home}` | Home | N/A | | +| `{end}` | End | N/A | | | `{shift}` | Shift | `shiftKey` | Does **not** capitalize following characters. | | `{ctrl}` | Control | `ctrlKey` | | | `{alt}` | Alt | `altKey` | | @@ -686,6 +687,7 @@ Thanks goes to these people ([emoji key][emojis]): + This project follows the [all-contributors][all-contributors] specification. diff --git a/src/__tests__/type.js b/src/__tests__/type.js index 80588319..18fb97d5 100644 --- a/src/__tests__/type.js +++ b/src/__tests__/type.js @@ -1067,6 +1067,56 @@ test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => { `) }) +test('navigation key: {home} and {end} moves the cursor', () => { + const {element, getEventSnapshot} = setup('') + userEvent.type(element, 'c{home}ab{end}d') + expect(getEventSnapshot()).toMatchInlineSnapshot(` + Events fired on: input[value="abcd"] + + input[value=""] - pointerover + input[value=""] - pointerenter + input[value=""] - mouseover: Left (0) + input[value=""] - mouseenter: Left (0) + input[value=""] - pointermove + input[value=""] - mousemove: Left (0) + input[value=""] - pointerdown + input[value=""] - mousedown: Left (0) + input[value=""] - focus + input[value=""] - focusin + input[value=""] - pointerup + input[value=""] - mouseup: Left (0) + input[value=""] - click: Left (0) + input[value=""] - keydown: c (99) + input[value=""] - keypress: c (99) + input[value="c"] - input + "{CURSOR}" -> "c{CURSOR}" + input[value="c"] - keyup: c (99) + input[value="c"] - keydown: Home (36) + input[value="c"] - select + input[value="c"] - keyup: Home (36) + input[value="c"] - keydown: a (97) + input[value="c"] - keypress: a (97) + input[value="ac"] - input + "{CURSOR}c" -> "ac{CURSOR}" + input[value="ac"] - select + input[value="ac"] - keyup: a (97) + input[value="ac"] - keydown: b (98) + input[value="ac"] - keypress: b (98) + input[value="abc"] - input + "a{CURSOR}c" -> "abc{CURSOR}" + input[value="abc"] - select + input[value="abc"] - keyup: b (98) + input[value="abc"] - keydown: End (35) + input[value="abc"] - select + input[value="abc"] - keyup: End (35) + input[value="abc"] - keydown: d (100) + input[value="abc"] - keypress: d (100) + input[value="abcd"] - input + "abc{CURSOR}" -> "abcd{CURSOR}" + input[value="abcd"] - keyup: d (100) + `) +}) + test('can type into an input with type `time`', () => { const {element, getEventSnapshot} = setup('') userEvent.type(element, '01:05') diff --git a/src/keys/navigation-key.js b/src/keys/navigation-key.js index d232f90b..2bbcce8c 100644 --- a/src/keys/navigation-key.js +++ b/src/keys/navigation-key.js @@ -3,6 +3,12 @@ import {fireEvent} from '@testing-library/dom' import {setSelectionRangeIfNecessary} from '../utils' const keys = { + Home: { + keyCode: 36, + }, + End: { + keyCode: 35, + }, ArrowLeft: { keyCode: 37, }, @@ -13,6 +19,21 @@ const keys = { function getSelectionRange(currentElement, key) { const {selectionStart, selectionEnd} = currentElement() + + if (key === 'Home') { + return { + selectionStart: 0, + selectionEnd: 0, + } + } + + if (key === 'End') { + return { + selectionStart: selectionEnd + 1, + selectionEnd: selectionEnd + 1, + } + } + const cursorChange = Number(key in keys) * (key === 'ArrowLeft' ? -1 : 1) return { selectionStart: selectionStart + cursorChange, diff --git a/src/type.js b/src/type.js index 336e4533..71fdf1cd 100644 --- a/src/type.js +++ b/src/type.js @@ -96,6 +96,8 @@ const specialCharMap = { escape: '{esc}', delete: '{del}', backspace: '{backspace}', + home: '{home}', + end: '{end}', selectAll: '{selectall}', space: '{space}', whitespace: ' ', @@ -106,6 +108,8 @@ const specialCharCallbackMap = { [specialCharMap.arrowRight]: navigationKey('ArrowRight'), [specialCharMap.arrowDown]: handleArrowDown, [specialCharMap.arrowUp]: handleArrowUp, + [specialCharMap.home]: navigationKey('Home'), + [specialCharMap.end]: navigationKey('End'), [specialCharMap.enter]: handleEnter, [specialCharMap.escape]: handleEsc, [specialCharMap.delete]: handleDel,