fix: leading number being trimmed on point type (#376)

Closes:#360
testing-library · Jun 21, 2020 · 1ddadbd · 1ddadbd
1 parent 50e330b
commit 1ddadbd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/src/__tests__/type.js b/src/__tests__/type.js
@@ -641,11 +641,11 @@ test('can type "-" into number inputs', () => {
 // https://github.com/testing-library/user-event/issues/336
 test('can type "." into number inputs', () => {
   const {element, getEventSnapshot} = setup('<input type="number" />')
-  userEvent.type(element, '0.3')
-  expect(element).toHaveValue(0.3)
+  userEvent.type(element, '3.3')
+  expect(element).toHaveValue(3.3)
 
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
-    Events fired on: input[value=".3"]
+    Events fired on: input[value="3.3"]
 
     input[value=""] - pointerover
     input[value=""] - pointerenter
@@ -660,21 +660,21 @@ test('can type "." into number inputs', () => {
     input[value=""] - pointerup
     input[value=""] - mouseup: Left (0)
     input[value=""] - click: Left (0)
-    input[value=""] - keydown: 0 (48)
-    input[value=""] - keypress: 0 (48)
-    input[value="0"] - input
-      "{CURSOR}" -> "{CURSOR}0"
-    input[value="0"] - keyup: 0 (48)
-    input[value="0"] - keydown: . (46)
-    input[value="0"] - keypress: . (46)
+    input[value=""] - keydown: 3 (51)
+    input[value=""] - keypress: 3 (51)
+    input[value="3"] - input
+      "{CURSOR}" -> "{CURSOR}3"
+    input[value="3"] - keyup: 3 (51)
+    input[value="3"] - keydown: . (46)
+    input[value="3"] - keypress: . (46)
     input[value=""] - input
-      "{CURSOR}0" -> "{CURSOR}"
+      "{CURSOR}3" -> "{CURSOR}"
     input[value=""] - keyup: . (46)
     input[value=""] - keydown: 3 (51)
     input[value=""] - keypress: 3 (51)
-    input[value=".3"] - input
-      "{CURSOR}" -> "{CURSOR}.3"
-    input[value=".3"] - keyup: 3 (51)
+    input[value="3.3"] - input
+      "{CURSOR}" -> "{CURSOR}3.3"
+    input[value="3.3"] - keyup: 3 (51)
   `)
 })
 

diff --git a/src/type.js b/src/type.js
@@ -139,18 +139,20 @@ async function typeImpl(
 
   async function runCallbacks(callbacks) {
     const eventOverrides = {}
-    let prevWasMinus, prevWasPeriod
+    let prevWasMinus, prevWasPeriod, prevValue
     for (const callback of callbacks) {
       if (delay > 0) await wait(delay)
       if (!currentElement().disabled) {
         const returnValue = callback({
           prevWasMinus,
           prevWasPeriod,
+          prevValue,
           eventOverrides,
         })
         Object.assign(eventOverrides, returnValue?.eventOverrides)
         prevWasMinus = returnValue?.prevWasMinus
         prevWasPeriod = returnValue?.prevWasPeriod
+        prevValue = returnValue?.prevValue
       }
     }
   }
@@ -175,7 +177,12 @@ async function typeImpl(
 
   function typeCharacter(
     char,
-    {prevWasMinus = false, prevWasPeriod = false, eventOverrides},
+    {
+      prevWasMinus = false,
+      prevWasPeriod = false,
+      prevValue = '',
+      eventOverrides,
+    },
   ) {
     const key = char // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
     const keyCode = char.charCodeAt(0)
@@ -201,17 +208,18 @@ async function typeImpl(
         if (prevWasMinus) {
           newEntry = `-${char}`
         } else if (prevWasPeriod) {
-          newEntry = `.${char}`
+          newEntry = `${prevValue}.${char}`
         }
 
-        const {prevValue} = fireInputEventIfNeeded({
+        const inputEvent = fireInputEventIfNeeded({
           ...calculateNewValue(newEntry, currentElement()),
           eventOverrides: {
             data: key,
             inputType: 'insertText',
             ...eventOverrides,
           },
         })
+        prevValue = inputEvent.prevValue
 
         // typing "-" into a number input will not actually update the value
         // so for the next character we type, the value should be set to
@@ -242,7 +250,11 @@ async function typeImpl(
       ...eventOverrides,
     })
 
-    return {prevWasMinus: nextPrevWasMinus, prevWasPeriod: nextPrevWasPeriod}
+    return {
+      prevWasMinus: nextPrevWasMinus,
+      prevWasPeriod: nextPrevWasPeriod,
+      prevValue,
+    }
   }
 }