feat: add keydownBehavior for ArrowLeft and ArrowRight on `<texta…

…rea>` (#686)

src/__tests__/type.js

@@ -896,7 +896,7 @@ test('should not type inside a contenteditable=false div', () => {
   `)
 })
 
-test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => {
+test('navigation key: {arrowleft} and {arrowright} moves the cursor for <input>', () => {
   const {element, getEventSnapshot} = setup('<input />')
   userEvent.type(element, 'b{arrowleft}a{arrowright}c')
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
@@ -937,6 +937,47 @@ test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => {
   `)
 })
 
+test('navigation key: {arrowleft} and {arrowright} moves the cursor for <textarea>', () => {
+  const {element, getEventSnapshot} = setup('<textarea></textarea>')
+  userEvent.type(element, 'b{arrowleft}a{arrowright}c')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: textarea[value="abc"]
+
+    textarea[value=""] - pointerover
+    textarea[value=""] - pointerenter
+    textarea[value=""] - mouseover: Left (0)
+    textarea[value=""] - mouseenter: Left (0)
+    textarea[value=""] - pointermove
+    textarea[value=""] - mousemove: Left (0)
+    textarea[value=""] - pointerdown
+    textarea[value=""] - mousedown: Left (0)
+    textarea[value=""] - focus
+    textarea[value=""] - focusin
+    textarea[value=""] - pointerup
+    textarea[value=""] - mouseup: Left (0)
+    textarea[value=""] - click: Left (0)
+    textarea[value=""] - keydown: b (98)
+    textarea[value=""] - keypress: b (98)
+    textarea[value="b"] - input
+    textarea[value="b"] - keyup: b (98)
+    textarea[value="b"] - keydown: ArrowLeft (37)
+    textarea[value="b"] - select
+    textarea[value="b"] - keyup: ArrowLeft (37)
+    textarea[value="b"] - keydown: a (97)
+    textarea[value="b"] - keypress: a (97)
+    textarea[value="ab"] - select
+    textarea[value="ab"] - input
+    textarea[value="ab"] - keyup: a (97)
+    textarea[value="ab"] - keydown: ArrowRight (39)
+    textarea[value="ab"] - select
+    textarea[value="ab"] - keyup: ArrowRight (39)
+    textarea[value="ab"] - keydown: c (99)
+    textarea[value="ab"] - keypress: c (99)
+    textarea[value="abc"] - input
+    textarea[value="abc"] - keyup: c (99)
+  `)
+})
+
 test('navigation key: {home} and {end} moves the cursor', () => {
   const {element, getEventSnapshot} = setup('<input />')
   userEvent.type(element, 'c{home}ab{end}d')

src/keyboard/plugins/arrow.ts

@@ -8,10 +8,10 @@ import {getSelectionRange, isElementType, setSelectionRange} from '../../utils'
 
 export const keydownBehavior: behaviorPlugin[] = [
   {
-    // TODO: implement for textarea and contentEditable
+    // TODO: implement for contentEditable
     matches: (keyDef, element) =>
       (keyDef.key === 'ArrowLeft' || keyDef.key === 'ArrowRight') &&
-      isElementType(element, 'input'),
+      isElementType(element, ['input', 'textarea']),
     handle: (keyDef, element) => {
       const {selectionStart, selectionEnd} = getSelectionRange(element)