fix(clear): make re-use type

Author: kentcdodds

src/user-event/__tests__/clear.js

@@ -8,21 +8,13 @@ test('clears text', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
     focus
-    mouseup: Left (0)
-    click: Left (0)
-    mousedown: Left (0)
-    mouseup: Left (0)
-    click: Left (0)
-    dblclick: Left (0)
     select
-    keydown: Backspace (8)
-    keyup: Backspace (8)
-    input: "{SELECTION}hello{/SELECTION}" -> "hello"
-    change
+    select
+    keydown: Delete (46)
+    input: "{SELECTION}hello{/SELECTION}" -> ""
+    select
+    keyup: Delete (46)
   `)
 })
 
@@ -42,19 +34,11 @@ test('does not clear text on readonly inputs', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="hello"]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
     focus
-    mouseup: Left (0)
-    click: Left (0)
-    mousedown: Left (0)
-    mouseup: Left (0)
-    click: Left (0)
-    dblclick: Left (0)
     select
-    keydown: Backspace (8)
-    keyup: Backspace (8)
+    select
+    keydown: Delete (46)
+    keyup: Delete (46)
   `)
 })
 

src/user-event/clear.js

@@ -0,0 +1,22 @@
+import {wrapAsync} from '../wrap-async'
+import {isInputElement} from './utils'
+import {type} from './type'
+
+async function clear(element) {
+  if (element.disabled) return
+  // TODO: track the selection range ourselves so we don't have to do this input "type" trickery
+  // just like cypress does: https://github.com/cypress-io/cypress/blob/8d7f1a0bedc3c45a2ebf1ff50324b34129fdc683/packages/driver/src/dom/selection.ts#L16-L37
+  const elementType = element.type
+  // type is a readonly property on textarea, so check if element is an input before trying to modify it
+  if (isInputElement(element)) {
+    // setSelectionRange is not supported on certain types of inputs, e.g. "number" or "email"
+    element.type = 'text'
+  }
+  await type(element, '{selectall}{del}')
+  if (isInputElement(element)) {
+    element.type = elementType
+  }
+}
+clear = wrapAsync(clear)
+
+export {clear}

src/user-event/index.js

@@ -1,5 +1,6 @@
 import {wrapAsync} from '../wrap-async'
 import {fireEvent} from './tick-fire-event'
+import {isInputElement} from './utils'
 import {type} from './type'
 import {tick} from './tick'
 
@@ -219,24 +220,6 @@ async function backspace(element) {
   }
 }
 
-async function selectAll(element) {
-  await dblClick(element) // simulate events (will not actually select)
-  const elementType = element.type
-  // type is a readonly property on textarea, so check if element is an input before trying to modify it
-  if (isInputElement(element)) {
-    // setSelectionRange is not supported on certain types of inputs, e.g. "number" or "email"
-    element.type = 'text'
-  }
-  element.setSelectionRange(0, element.value.length)
-  if (isInputElement(element)) {
-    element.type = elementType
-  }
-}
-
-function isInputElement(element) {
-  return element.tagName.toLowerCase() === 'input'
-}
-
 function getPreviouslyFocusedElement(element) {
   const focusedElement = element.ownerDocument.activeElement
   const wasAnotherElementFocused =
@@ -367,14 +350,6 @@ async function toggleSelectOptions(element, values, init) {
 }
 toggleSelectOptions = wrapAsync(toggleSelectOptions)
 
-async function clear(element) {
-  if (element.disabled) return
-
-  await selectAll(element)
-  await backspace(element)
-}
-clear = wrapAsync(clear)
-
 async function upload(element, fileOrFiles, {clickInit, changeInit} = {}) {
   if (element.disabled) return
   const focusedElement = element.ownerDocument.activeElement
@@ -496,13 +471,13 @@ export {
   dblClick,
   selectOptions,
   toggleSelectOptions,
-  clear,
   type,
   upload,
   tab,
   hover,
   unhover,
 }
+export {clear} from './clear'
 
 /*
 eslint

src/user-event/utils.js

@@ -0,0 +1,5 @@
+function isInputElement(element) {
+  return element.tagName.toLowerCase() === 'input'
+}
+
+export {isInputElement}