feat: add type support for {home} and {end} (#536)

* Add type support for {home} and {end}

* update README to include {home} and {end}

* fix keycode on End and Home

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>

README.md

@@ -47,7 +47,6 @@ change the state of the checkbox.
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [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]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

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('<input />')
+  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('<input type="time" />')
   userEvent.type(element, '01:05')

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,

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,