feat(keyboard): handle PageUp and PageDown on input (#734)

JohannesFischer · ph-fritsche · web-flow · commit f731f68b1e7a · 2021-10-15T12:30:16.000+02:00
* feat: add support for pageup and pagedown control keys

* remove PageUp and PageDown behaviour from textarea and editable elements

Co-authored-by: Philipp Fritsche &lt;ph.fritsche@gmail.com&gt;
diff --git a/src/__tests__/type.js b/src/__tests__/type.js
@@ -1024,6 +1024,52 @@ test('navigation key: {home} and {end} moves the cursor', () => {
   `)
 })
 
+test('navigation key: {pageUp} and {pageDown} moves the cursor for <input>', () => {
+  const {element, getEventSnapshot} = setup('<input />')
+  userEvent.type(element, 'c{pageUp}ab{pageDown}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
+    input[value="c"] - keyup: c (99)
+    input[value="c"] - keydown: PageUp (33)
+    input[value="c"] - select
+    input[value="c"] - keyup: PageUp (33)
+    input[value="c"] - keydown: a (97)
+    input[value="c"] - keypress: a (97)
+    input[value="ac"] - select
+    input[value="ac"] - input
+    input[value="ac"] - keyup: a (97)
+    input[value="ac"] - keydown: b (98)
+    input[value="ac"] - keypress: b (98)
+    input[value="abc"] - select
+    input[value="abc"] - input
+    input[value="abc"] - keyup: b (98)
+    input[value="abc"] - keydown: PageDown (34)
+    input[value="abc"] - select
+    input[value="abc"] - keyup: PageDown (34)
+    input[value="abc"] - keydown: d (100)
+    input[value="abc"] - keypress: d (100)
+    input[value="abcd"] - input
+    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')
diff --git a/src/keyboard/keyMap.ts b/src/keyboard/keyMap.ts
@@ -73,6 +73,8 @@ export const defaultKeyMap: keyboardKey[] = [
   {code: 'Home', key: 'Home', keyCode: 36},
   {code: 'End', key: 'End', keyCode: 35},
   {code: 'Delete', key: 'Delete', keyCode: 46},
+  {code: 'PageUp', key: 'PageUp', keyCode: 33},
+  {code: 'PageDown', key: 'PageDown', keyCode: 34},
 
   // TODO: add mappings
 ]
diff --git a/src/keyboard/plugins/control.ts b/src/keyboard/plugins/control.ts
@@ -31,6 +31,20 @@ export const keydownBehavior: behaviorPlugin[] = [
       }
     },
   },
+  {
+    matches: (keyDef, element) =>
+      (keyDef.key === 'PageUp' || keyDef.key === 'PageDown') &&
+      isElementType(element, ['input']),
+    handle: (keyDef, element) => {
+      // This could probably been improved by collapsing a selection range
+      if (keyDef.key === 'PageUp') {
+        setSelectionRange(element, 0, 0)
+      } else {
+        const newPos = getValue(element)?.length ?? /* istanbul ignore next */ 0
+        setSelectionRange(element, newPos, newPos)
+      }
+    },
+  },
   {
     matches: (keyDef, element) =>
       keyDef.key === 'Delete' && isEditable(element) && !isCursorAtEnd(element),
diff --git a/src/keyboard/specialCharMap.ts b/src/keyboard/specialCharMap.ts
@@ -12,4 +12,6 @@ export const specialCharMap = {
   selectAll: '{selectall}',
   space: '{space}',
   whitespace: ' ',
+  pageUp: '{pageUp}',
+  pageDown: '{pageDown}',
 } as const

Original file line number	Diff line number	Diff line change
`@@ -73,6 +73,8 @@ export const defaultKeyMap: keyboardKey[] = [`
`73`	`73`	`{code: 'Home', key: 'Home', keyCode: 36},`
`74`	`74`	`{code: 'End', key: 'End', keyCode: 35},`
`75`	`75`	`{code: 'Delete', key: 'Delete', keyCode: 46},`
	`76`	`+ {code: 'PageUp', key: 'PageUp', keyCode: 33},`
	`77`	`+ {code: 'PageDown', key: 'PageDown', keyCode: 34},`
`76`	`78`
`77`	`79`	`// TODO: add mappings`
`78`	`80`	`]`