fix(keyboard): inputType for Enter on contenteditable (#614)

* fix: getSelectionRange on contenteditable without Range * fix: inputType for `Enter` on contenteditable * test: bump coverage
testing-library · Mar 23, 2021 · 2b0632a · 2b0632a
1 parent 4c3d3cf
commit 2b0632a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/__tests__/keyboard/plugin/character.ts b/src/__tests__/keyboard/plugin/character.ts
@@ -2,18 +2,26 @@ import userEvent from 'index'
 import {setup} from '__tests__/helpers/utils'
 
 test('type [Enter] in textarea', () => {
-  const {element} = setup(`<textarea>f</textarea>`)
+  const {element, getEvents} = setup(`<textarea>f</textarea>`)
 
-  userEvent.type(element as HTMLTextAreaElement, 'oo[Enter]bar')
+  userEvent.type(
+    element as HTMLTextAreaElement,
+    'oo[Enter]bar[ShiftLeft>][Enter]baz',
+  )
 
-  expect(element).toHaveValue('foo\nbar')
+  expect(element).toHaveValue('foo\nbar\nbaz')
+  expect(getEvents('input')[2]).toHaveProperty('inputType', 'insertLineBreak')
+  expect(getEvents('input')[6]).toHaveProperty('inputType', 'insertLineBreak')
 })
 
 test('type [Enter] in contenteditable', () => {
-  const {element} = setup(`<div contenteditable="true">f</div>`)
+  const {element, getEvents} = setup(`<div contenteditable="true">f</div>`)
+  ;(element as HTMLDivElement).focus()
 
-  userEvent.type(element as HTMLTextAreaElement, 'oo[Enter]bar')
+  userEvent.keyboard('oo[Enter]bar[ShiftLeft>][Enter]baz')
 
-  expect(element).toHaveTextContent('foo bar')
-  expect(element?.firstChild).toHaveProperty('nodeValue', 'foo\nbar')
+  expect(element).toHaveTextContent('foo bar baz')
+  expect(element?.firstChild).toHaveProperty('nodeValue', 'foo\nbar\nbaz')
+  expect(getEvents('input')[2]).toHaveProperty('inputType', 'insertParagraph')
+  expect(getEvents('input')[6]).toHaveProperty('inputType', 'insertLineBreak')
 })
diff --git a/src/keyboard/plugins/character.ts b/src/keyboard/plugins/character.ts
@@ -165,17 +165,22 @@ export const keypressBehavior: behaviorPlugin[] = [
       keyDef.key === 'Enter' &&
       (isInstanceOfElement(element, 'HTMLTextAreaElement') ||
         isContentEditable(element)),
-    handle: (keyDef, element) => {
+    handle: (keyDef, element, options, state) => {
       const {newValue, newSelectionStart} = calculateNewValue(
         '\n',
         element as HTMLElement,
       )
 
+      const inputType =
+        isContentEditable(element) && !state.modifiers.shift
+          ? 'insertParagraph'
+          : 'insertLineBreak'
+
       fireInputEventIfNeeded({
         newValue,
         newSelectionStart,
         eventOverrides: {
-          inputType: 'insertLineBreak',
+          inputType,
         },
         currentElement: () => element,
       })

diff --git a/src/utils/edit/getSelectionRange.ts b/src/utils/edit/getSelectionRange.ts
@@ -8,10 +8,9 @@ export function getSelectionRange(
 } {
   if (isContentEditable(element)) {
     const selection = element.ownerDocument.getSelection()
-    const range = selection?.getRangeAt(0)
 
-    // istanbul ignore else
-    if (range) {
+    if (selection?.rangeCount) {
+      const range = selection.getRangeAt(0)
       return {
         selectionStart: range.startOffset,
         selectionEnd: range.endOffset,