From a4597532788db5fc71a2f91915d46aba1e2ce69e Mon Sep 17 00:00:00 2001
From: Michal Kurcius <mkurcius@gmail.com>
Date: Sat, 19 Jun 2021 12:35:07 +0200
Subject: [PATCH] feat: keydownBehavior for textarea

---
 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 d1d72207..a0f4a91a 100644
--- a/src/__tests__/type.js
+++ b/src/__tests__/type.js
@@ -895,7 +895,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(`
@@ -936,6 +936,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)