From f8f00d4759b52f703e8e74292169a7394363426b Mon Sep 17 00:00:00 2001
From: mkurcius <mkurcius@gmail.com>
Date: Sat, 17 Jul 2021 17:41:31 +0200
Subject: [PATCH] feat: add keydownBehavior for `ArrowLeft` and `ArrowRight` on
 `<textarea>` (#686)

---
 src/__tests__/type.js         | 43 ++++++++++++++++++++++++++++++++++-
 src/keyboard/plugins/arrow.ts |  4 ++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/type.js b/src/__tests__/type.js
index b91f436b..d5b8cea6 100644
--- a/src/__tests__/type.js
+++ b/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')
diff --git a/src/keyboard/plugins/arrow.ts b/src/keyboard/plugins/arrow.ts
index 3ab3529e..f95130ed 100644
--- a/src/keyboard/plugins/arrow.ts
+++ b/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)