From 3b58867915e999b7827ce0c350eb86dba31e72b6 Mon Sep 17 00:00:00 2001
From: Joerg Bayreuther <jb@visualjerk.de>
Date: Fri, 24 Jul 2020 10:25:32 +0200
Subject: [PATCH 1/5] fix: remove error for typing on non value elements

---
 src/__tests__/type.js | 24 ++++++++++--------------
 src/type.js           | 22 +++++-----------------
 2 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/src/__tests__/type.js b/src/__tests__/type.js
index 04d40acf..73ab1892 100644
--- a/src/__tests__/type.js
+++ b/src/__tests__/type.js
@@ -707,13 +707,12 @@ test('typing an invalid input value', () => {
   expect(element.validity.badInput).toBe(false)
 })
 
-test('should give error if we are trying to call type on an invalid element', async () => {
-  const {element} = setup('<div  />')
-  await expect(() =>
-    userEvent.type(element, "I'm only a div :("),
-  ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `"the current element is of type BODY and doesn't have a valid value"`,
-  )
+test('should not throw error if we are trying to call type on an element without a value', () => {
+  const {element} = setup('<div />')
+  expect.assertions(0)
+  return userEvent
+    .type(element, "I'm only a div :(")
+    .catch(e => expect(e).toBeUndefined())
 })
 
 test('typing on button should not alter its value', () => {
@@ -752,11 +751,8 @@ test('typing on input type submit should not alter its value', () => {
   expect(element).toHaveValue('foo')
 })
 
-test('typing on input type file should not trigger input event', () => {
-  const inputHandler = jest.fn()
-  const {element} = setup('<input type="file" />', {
-    eventHandlers: {input: inputHandler},
-  })
-  userEvent.type(element, 'bar')
-  expect(inputHandler).toHaveBeenCalledTimes(0)
+test('typing on input type file should not result in an error', () => {
+  const {element} = setup('<input type="file" />')
+  expect.assertions(0)
+  return userEvent.type(element, 'bar').catch(e => expect(e).toBeUndefined())
 })
diff --git a/src/type.js b/src/type.js
index 3c62b81a..52668fe6 100644
--- a/src/type.js
+++ b/src/type.js
@@ -88,16 +88,7 @@ async function typeImpl(
   // The focused element could change between each event, so get the currently active element each time
   const currentElement = () => getActiveElement(element.ownerDocument)
 
-  const currentValue = () => {
-    const activeElement = currentElement()
-    const value = activeElement.value
-    if (typeof value === 'undefined') {
-      throw new TypeError(
-        `the current element is of type ${activeElement.tagName} and doesn't have a valid value`,
-      )
-    }
-    return value
-  }
+  const currentValue = () => currentElement().value
 
   // by default, a new element has it's selection start and end at 0
   // but most of the time when people call "type", they expect it to type
@@ -109,7 +100,8 @@ async function typeImpl(
   // explicitely start typing with the cursor at 0. Not super common.
   if (
     currentElement().selectionStart === 0 &&
-    currentElement().selectionEnd === 0
+    currentElement().selectionEnd === 0 &&
+    currentValue() != null
   ) {
     setSelectionRangeIfNecessary(
       currentElement(),
@@ -215,7 +207,7 @@ function getSpecialCharCallback(remainingString) {
 
 function getTypeCallback(remainingString) {
   const character = remainingString[0]
-  const callback = createTypeCharacter(character)
+  const callback = context => typeCharacter(character, context)
   return {
     callback,
     remainingString: remainingString.slice(1),
@@ -279,10 +271,6 @@ function fireInputEventIfNeeded({
   return {prevValue}
 }
 
-function createTypeCharacter(character) {
-  return context => typeCharacter(character, context)
-}
-
 function typeCharacter(
   char,
   {
@@ -313,7 +301,7 @@ function typeCharacter(
       ...eventOverrides,
     })
 
-    if (keyPressDefaultNotPrevented) {
+    if (keyPressDefaultNotPrevented && currentValue() != null) {
       let newEntry = char
       if (prevWasMinus) {
         newEntry = `-${char}`

From 64f33675c8e44330765e3862e55c94a714307a39 Mon Sep 17 00:00:00 2001
From: Joerg Bayreuther <jb@visualjerk.de>
Date: Fri, 24 Jul 2020 10:41:06 +0200
Subject: [PATCH 2/5] test: better names for input color tests

---
 src/__tests__/type-modifiers.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/__tests__/type-modifiers.js b/src/__tests__/type-modifiers.js
index cf79b20e..b7b668d6 100644
--- a/src/__tests__/type-modifiers.js
+++ b/src/__tests__/type-modifiers.js
@@ -471,14 +471,10 @@ test('{space} on a button', () => {
   `)
 })
 
-test('{space} with preventDefault keydown on button', () => {
-  const {element, getEventSnapshot} = setup('<button />', {
-    eventHandlers: {
-      keyDown: e => e.preventDefault(),
-    },
-  })
+test(`' ' on a button is the same as '{space}'`, () => {
+  const {element, getEventSnapshot} = setup('<button />')
 
-  userEvent.type(element, '{space}')
+  userEvent.type(element, ' ')
 
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: button
@@ -497,15 +493,20 @@ test('{space} with preventDefault keydown on button', () => {
     button - mouseup: Left (0)
     button - click: Left (0)
     button - keydown: (32)
+    button - keypress: (32)
     button - keyup: (32)
     button - click: Left (0)
   `)
 })
 
-test(`' ' on a button`, () => {
-  const {element, getEventSnapshot} = setup('<button />')
+test('{space} with preventDefault keydown on button', () => {
+  const {element, getEventSnapshot} = setup('<button />', {
+    eventHandlers: {
+      keyDown: e => e.preventDefault(),
+    },
+  })
 
-  userEvent.type(element, ' ')
+  userEvent.type(element, '{space}')
 
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: button
@@ -524,7 +525,6 @@ test(`' ' on a button`, () => {
     button - mouseup: Left (0)
     button - click: Left (0)
     button - keydown: (32)
-    button - keypress: (32)
     button - keyup: (32)
     button - click: Left (0)
   `)
@@ -559,7 +559,7 @@ test('{space} on an input', () => {
   `)
 })
 
-test('{enter} on an input type="color"', () => {
+test('{enter} on an input type="color" fires same events as a button', () => {
   const {element, getEventSnapshot} = setup(
     `<input value="#ffffff" type="color" />`,
   )
@@ -589,7 +589,7 @@ test('{enter} on an input type="color"', () => {
   `)
 })
 
-test('{space} on an input type="color"', () => {
+test('{space} on an input type="color" fires same events as a button', () => {
   const {element, getEventSnapshot} = setup(
     `<input value="#ffffff" type="color" />`,
   )
@@ -619,7 +619,7 @@ test('{space} on an input type="color"', () => {
   `)
 })
 
-test('" " on an input type="color"', () => {
+test(`' ' on input type="color" is the same as '{space}'`, () => {
   const {element, getEventSnapshot} = setup(
     `<input value="#ffffff" type="color" />`,
   )

From d9733cc12cf70b34b29aed3c664c2738d4f1ec5f Mon Sep 17 00:00:00 2001
From: Joerg Bayreuther <jb@visualjerk.de>
Date: Fri, 24 Jul 2020 10:58:29 +0200
Subject: [PATCH 3/5] refactor: currentElement instead of currentValue

---
 src/paste.js |  6 +----
 src/type.js  | 66 ++++++++++++++++++----------------------------------
 2 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/src/paste.js b/src/paste.js
index ce88ea26..30100e69 100644
--- a/src/paste.js
+++ b/src/paste.js
@@ -38,11 +38,7 @@ function paste(
   fireEvent.paste(element, init)
 
   if (!element.readOnly) {
-    const {newValue, newSelectionStart} = calculateNewValue(
-      text,
-      element,
-      element.value,
-    )
+    const {newValue, newSelectionStart} = calculateNewValue(text, element)
     fireEvent.input(element, {
       inputType: 'insertFromPaste',
       target: {value: newValue},
diff --git a/src/type.js b/src/type.js
index 52668fe6..68ed84ae 100644
--- a/src/type.js
+++ b/src/type.js
@@ -88,8 +88,6 @@ async function typeImpl(
   // The focused element could change between each event, so get the currently active element each time
   const currentElement = () => getActiveElement(element.ownerDocument)
 
-  const currentValue = () => currentElement().value
-
   // by default, a new element has it's selection start and end at 0
   // but most of the time when people call "type", they expect it to type
   // at the end of the current input value. So, if the selection start
@@ -98,15 +96,16 @@ async function typeImpl(
   // the only time it would make sense to pass the initialSelectionStart or
   // initialSelectionEnd is if you have an input with a value and want to
   // explicitely start typing with the cursor at 0. Not super common.
+  const value = currentElement().value
   if (
+    value != null &&
     currentElement().selectionStart === 0 &&
-    currentElement().selectionEnd === 0 &&
-    currentValue() != null
+    currentElement().selectionEnd === 0
   ) {
     setSelectionRangeIfNecessary(
       currentElement(),
-      initialSelectionStart ?? currentValue().length,
-      initialSelectionEnd ?? currentValue().length,
+      initialSelectionStart ?? value.length,
+      initialSelectionEnd ?? value.length,
     )
   }
 
@@ -137,7 +136,6 @@ async function typeImpl(
       if (!currentElement().disabled) {
         const returnValue = callback({
           currentElement,
-          currentValue,
           prevWasMinus,
           prevWasPeriod,
           prevValue,
@@ -214,19 +212,14 @@ function getTypeCallback(remainingString) {
   }
 }
 
-function setSelectionRange({
-  currentElement,
-  currentValue,
-  newValue,
-  newSelectionStart,
-}) {
+function setSelectionRange({currentElement, newValue, newSelectionStart}) {
   // if we *can* change the selection start, then we will if the new value
   // is the same as the current value (so it wasn't programatically changed
   // when the fireEvent.input was triggered).
   // The reason we have to do this at all is because it actually *is*
   // programmatically changed by fireEvent.input, so we have to simulate the
   // browser's default behavior
-  const value = currentValue()
+  const value = currentElement().value
 
   if (value === newValue) {
     setSelectionRangeIfNecessary(
@@ -243,13 +236,12 @@ function setSelectionRange({
 }
 
 function fireInputEventIfNeeded({
+  currentElement,
   newValue,
   newSelectionStart,
   eventOverrides,
-  currentValue,
-  currentElement,
 }) {
-  const prevValue = currentValue()
+  const prevValue = currentElement().value
   if (
     !currentElement().readOnly &&
     !isClickable(currentElement()) &&
@@ -262,7 +254,6 @@ function fireInputEventIfNeeded({
 
     setSelectionRange({
       currentElement,
-      currentValue,
       newValue,
       newSelectionStart,
     })
@@ -275,7 +266,6 @@ function typeCharacter(
   char,
   {
     currentElement,
-    currentValue,
     prevWasMinus = false,
     prevWasPeriod = false,
     prevValue = '',
@@ -301,7 +291,7 @@ function typeCharacter(
       ...eventOverrides,
     })
 
-    if (keyPressDefaultNotPrevented && currentValue() != null) {
+    if (currentElement().value != null && keyPressDefaultNotPrevented) {
       let newEntry = char
       if (prevWasMinus) {
         newEntry = `-${char}`
@@ -310,13 +300,12 @@ function typeCharacter(
       }
 
       const inputEvent = fireInputEventIfNeeded({
-        ...calculateNewValue(newEntry, currentElement(), currentValue()),
+        ...calculateNewValue(newEntry, currentElement()),
         eventOverrides: {
           data: key,
           inputType: 'insertText',
           ...eventOverrides,
         },
-        currentValue,
         currentElement,
       })
       prevValue = inputEvent.prevValue
@@ -328,7 +317,7 @@ function typeCharacter(
       // to typing an invalid character (typing "-a3" results in "-3")
       // same applies for the decimal character.
       if (currentElement().type === 'number') {
-        const newValue = currentValue()
+        const newValue = currentElement().value
         if (newValue === prevValue && newEntry !== '-') {
           nextPrevWasMinus = prevWasMinus
         } else {
@@ -361,8 +350,8 @@ function typeCharacter(
 // and you may be tempted to create a shared abstraction.
 // If you, brave soul, decide to so endevor, please increment this count
 // when you inevitably fail: 1
-function calculateNewBackspaceValue(element, value) {
-  const {selectionStart, selectionEnd} = element
+function calculateNewBackspaceValue(element) {
+  const {selectionStart, selectionEnd, value} = element
   let newValue, newSelectionStart
 
   if (selectionStart === null) {
@@ -394,8 +383,8 @@ function calculateNewBackspaceValue(element, value) {
   return {newValue, newSelectionStart}
 }
 
-function calculateNewDeleteValue(element, value) {
-  const {selectionStart, selectionEnd} = element
+function calculateNewDeleteValue(element) {
+  const {selectionStart, selectionEnd, value} = element
   let newValue
 
   if (selectionStart === null) {
@@ -459,7 +448,7 @@ function createModifierCallbackEntries({name, key, keyCode, modifierProperty}) {
   }
 }
 
-function handleEnter({currentElement, currentValue, eventOverrides}) {
+function handleEnter({currentElement, eventOverrides}) {
   const key = 'Enter'
   const keyCode = 13
 
@@ -489,7 +478,6 @@ function handleEnter({currentElement, currentValue, eventOverrides}) {
     const {newValue, newSelectionStart} = calculateNewValue(
       '\n',
       currentElement(),
-      currentValue(),
     )
     fireEvent.input(currentElement(), {
       target: {value: newValue},
@@ -498,7 +486,6 @@ function handleEnter({currentElement, currentValue, eventOverrides}) {
     })
     setSelectionRange({
       currentElement,
-      currentValue,
       newValue,
       newSelectionStart,
     })
@@ -533,7 +520,7 @@ function handleEsc({currentElement, eventOverrides}) {
   })
 }
 
-function handleDel({currentElement, currentValue, eventOverrides}) {
+function handleDel({currentElement, eventOverrides}) {
   const key = 'Delete'
   const keyCode = 46
 
@@ -546,13 +533,12 @@ function handleDel({currentElement, currentValue, eventOverrides}) {
 
   if (keyPressDefaultNotPrevented) {
     fireInputEventIfNeeded({
-      ...calculateNewDeleteValue(currentElement(), currentValue()),
+      ...calculateNewDeleteValue(currentElement()),
       eventOverrides: {
         inputType: 'deleteContentForward',
         ...eventOverrides,
       },
       currentElement,
-      currentValue,
     })
   }
 
@@ -564,7 +550,7 @@ function handleDel({currentElement, currentValue, eventOverrides}) {
   })
 }
 
-function handleBackspace({currentElement, currentValue, eventOverrides}) {
+function handleBackspace({currentElement, eventOverrides}) {
   const key = 'Backspace'
   const keyCode = 8
 
@@ -577,13 +563,12 @@ function handleBackspace({currentElement, currentValue, eventOverrides}) {
 
   if (keyPressDefaultNotPrevented) {
     fireInputEventIfNeeded({
-      ...calculateNewBackspaceValue(currentElement(), currentValue()),
+      ...calculateNewBackspaceValue(currentElement()),
       eventOverrides: {
         inputType: 'deleteContentBackward',
         ...eventOverrides,
       },
       currentElement,
-      currentValue,
     })
   }
 
@@ -595,10 +580,10 @@ function handleBackspace({currentElement, currentValue, eventOverrides}) {
   })
 }
 
-function handleSelectall({currentElement, currentValue}) {
+function handleSelectall({currentElement}) {
   // the user can actually select in several different ways
   // we're not going to choose, so we'll *only* set the selection range
-  currentElement().setSelectionRange(0, currentValue().length)
+  currentElement().setSelectionRange(0, currentElement().value.length)
 }
 
 function handleSpace(context) {
@@ -642,8 +627,3 @@ function handleSpaceOnClickable({currentElement, eventOverrides}) {
 }
 
 export {type}
-
-/*
-eslint
-  no-loop-func: "off",
-*/

From 9d23445161b3fae00caa15d4665e45b392ab30e5 Mon Sep 17 00:00:00 2001
From: JB <jb@visualjerk.de>
Date: Fri, 24 Jul 2020 21:55:34 +0200
Subject: [PATCH 4/5] fix: dont fire click with keydown preventDefault

---
 src/__tests__/type-modifiers.js | 31 ++++++++++++++++++++++++++++++-
 src/type.js                     | 19 ++++++++++---------
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/__tests__/type-modifiers.js b/src/__tests__/type-modifiers.js
index b7b668d6..8b94fbe2 100644
--- a/src/__tests__/type-modifiers.js
+++ b/src/__tests__/type-modifiers.js
@@ -443,6 +443,36 @@ test('{enter} on a button', () => {
   `)
 })
 
+test('{enter} with preventDefault on a button', () => {
+  const {element, getEventSnapshot} = setup('<button />', {
+    eventHandlers: {
+      keyDown: e => e.preventDefault(),
+    },
+  })
+
+  userEvent.type(element, '{enter}')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: button
+
+    button - pointerover
+    button - pointerenter
+    button - mouseover: Left (0)
+    button - mouseenter: Left (0)
+    button - pointermove
+    button - mousemove: Left (0)
+    button - pointerdown
+    button - mousedown: Left (0)
+    button - focus
+    button - focusin
+    button - pointerup
+    button - mouseup: Left (0)
+    button - click: Left (0)
+    button - keydown: Enter (13)
+    button - keyup: Enter (13)
+  `)
+})
+
 test('{space} on a button', () => {
   const {element, getEventSnapshot} = setup('<button />')
 
@@ -526,7 +556,6 @@ test('{space} with preventDefault keydown on button', () => {
     button - click: Left (0)
     button - keydown: (32)
     button - keyup: (32)
-    button - click: Left (0)
   `)
 })
 
diff --git a/src/type.js b/src/type.js
index 68ed84ae..b37d4188 100644
--- a/src/type.js
+++ b/src/type.js
@@ -466,12 +466,11 @@ function handleEnter({currentElement, eventOverrides}) {
       charCode: keyCode,
       ...eventOverrides,
     })
-  }
-
-  if (isClickable(currentElement())) {
-    fireEvent.click(currentElement(), {
-      ...eventOverrides,
-    })
+    if (isClickable(currentElement())) {
+      fireEvent.click(currentElement(), {
+        ...eventOverrides,
+      })
+    }
   }
 
   if (currentElement().tagName === 'TEXTAREA') {
@@ -621,9 +620,11 @@ function handleSpaceOnClickable({currentElement, eventOverrides}) {
     ...eventOverrides,
   })
 
-  fireEvent.click(currentElement(), {
-    ...eventOverrides,
-  })
+  if (keyDownDefaultNotPrevented) {
+    fireEvent.click(currentElement(), {
+      ...eventOverrides,
+    })
+  }
 }
 
 export {type}

From 0cfbfbcdf5a7a04cf8551a4c5c8aa4541a59887a Mon Sep 17 00:00:00 2001
From: JB <jb@visualjerk.de>
Date: Fri, 24 Jul 2020 22:01:03 +0200
Subject: [PATCH 5/5] fix: dont fire click with keyup preventDefault

---
 src/__tests__/type-modifiers.js | 31 +++++++++++++++++++++++++++++++
 src/type.js                     |  4 ++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/type-modifiers.js b/src/__tests__/type-modifiers.js
index 8b94fbe2..17f318b8 100644
--- a/src/__tests__/type-modifiers.js
+++ b/src/__tests__/type-modifiers.js
@@ -559,6 +559,37 @@ test('{space} with preventDefault keydown on button', () => {
   `)
 })
 
+test('{space} with preventDefault keyup on button', () => {
+  const {element, getEventSnapshot} = setup('<button />', {
+    eventHandlers: {
+      keyUp: e => e.preventDefault(),
+    },
+  })
+
+  userEvent.type(element, '{space}')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: button
+
+    button - pointerover
+    button - pointerenter
+    button - mouseover: Left (0)
+    button - mouseenter: Left (0)
+    button - pointermove
+    button - mousemove: Left (0)
+    button - pointerdown
+    button - mousedown: Left (0)
+    button - focus
+    button - focusin
+    button - pointerup
+    button - mouseup: Left (0)
+    button - click: Left (0)
+    button - keydown: (32)
+    button - keypress: (32)
+    button - keyup: (32)
+  `)
+})
+
 test('{space} on an input', () => {
   const {element, getEventSnapshot} = setup(`<input value="" />`)
 
diff --git a/src/type.js b/src/type.js
index b37d4188..c4324c28 100644
--- a/src/type.js
+++ b/src/type.js
@@ -613,14 +613,14 @@ function handleSpaceOnClickable({currentElement, eventOverrides}) {
     })
   }
 
-  fireEvent.keyUp(currentElement(), {
+  const keyUpDefaultNotPrevented = fireEvent.keyUp(currentElement(), {
     key,
     keyCode,
     which: keyCode,
     ...eventOverrides,
   })
 
-  if (keyDownDefaultNotPrevented) {
+  if (keyDownDefaultNotPrevented && keyUpDefaultNotPrevented) {
     fireEvent.click(currentElement(), {
       ...eventOverrides,
     })