fix: set initial value when setting UI value (#918)

Author: ph-fritsche

src/document/index.ts

@@ -2,9 +2,9 @@ import {dispatchUIEvent} from '../event'
 import {Config} from '../setup'
 import {prepareSelectionInterceptor} from './selection'
 import {
+  clearInitialValue,
   getInitialValue,
   prepareValueInterceptor,
-  setInitialValue,
 } from './value'
 
 const isPrepared = Symbol('Node prepared with document state workarounds')
@@ -45,8 +45,11 @@ export function prepareDocument(document: Document) {
     e => {
       const el = e.target as HTMLInputElement
       const initialValue = getInitialValue(el)
-      if (typeof initialValue === 'string' && el.value !== initialValue) {
-        dispatchUIEvent({} as Config, el, 'change')
+      if (initialValue !== undefined) {
+        if (el.value !== initialValue) {
+          dispatchUIEvent({} as Config, el, 'change')
+        }
+        clearInitialValue(el)
       }
     },
     {
@@ -59,10 +62,6 @@ export function prepareDocument(document: Document) {
 }
 
 function prepareElement(el: Node | HTMLInputElement) {
-  if ('value' in el) {
-    setInitialValue(el)
-  }
-
   if (el[isPrepared]) {
     return
   }
@@ -75,6 +74,12 @@ function prepareElement(el: Node | HTMLInputElement) {
   el[isPrepared] = isPrepared
 }
 
-export {getUIValue, setUIValue, startTrackValue, endTrackValue} from './value'
+export {
+  getUIValue,
+  setUIValue,
+  startTrackValue,
+  endTrackValue,
+  clearInitialValue,
+} from './value'
 export {getUISelection, setUISelection} from './selection'
 export type {UISelectionRange} from './selection'

src/document/value.ts

@@ -65,6 +65,10 @@ export function setUIValue(
   element: HTMLInputElement | HTMLTextAreaElement,
   value: string,
 ) {
+  if (element[InitialValue] === undefined) {
+    element[InitialValue] = element.value
+  }
+
   element.value = {
     [UIValue]: UIValue,
     toString: () => value,
@@ -77,10 +81,10 @@ export function getUIValue(element: HTMLInputElement | HTMLTextAreaElement) {
     : String(element[UIValue])
 }
 
-export function setInitialValue(
+export function clearInitialValue(
   element: HTMLInputElement | HTMLTextAreaElement,
 ) {
-  element[InitialValue] = element.value
+  element[InitialValue] = undefined
 }
 
 export function getInitialValue(
@@ -122,7 +126,6 @@ function setCleanValue(
   v: string,
 ) {
   element[UIValue] = undefined
-  element[InitialValue] = v
 
   // Programmatically setting the value property
   // moves the cursor to the end of the input.

src/utils/edit/input.ts

@@ -1,4 +1,5 @@
 import {
+  clearInitialValue,
   endTrackValue,
   getUIValue,
   setUIValue,
@@ -169,6 +170,7 @@ function editInputElement(
     if (isValidDateOrTimeValue(element, newValue)) {
       commitInput(config, element, newOffset, {})
       dispatchUIEvent(config, element, 'change')
+      clearInitialValue(element)
     }
   } else {
     commitInput(config, element, newOffset, {

tests/document/index.ts

@@ -50,7 +50,7 @@ test('keep track of value in UI', async () => {
   expect(getUIValue(element)).toBe('3.5')
 })
 
-test('trigger `change` event if value changed since focus/set', async () => {
+test('trigger `change` event if value changed per user input', async () => {
   const {element, getEvents} = render<HTMLInputElement>(
     `<input type="number"/>`,
     {focus: false},
@@ -66,16 +66,25 @@ test('trigger `change` event if value changed since focus/set', async () => {
   expect(getEvents('change')).toHaveLength(0)
 
   element.focus()
-  // Programmatically changing value sets initial value
+  // Programmatically changing value is ignored
   element.value = '3'
+  // Value doesn't change
   setUIValue(element, '3')
   element.blur()
 
   expect(getEvents('change')).toHaveLength(0)
 
   element.focus()
+  setUIValue(element, '2')
+  // value is reset so there is no change in the end
+  element.value = '3'
+  element.blur()
+
+  expect(getEvents('change')).toHaveLength(0)
+
+  element.focus()
+  setUIValue(element, '2')
   element.value = '2'
-  setUIValue(element, '3')
   element.blur()
 
   expect(getEvents('change')).toHaveLength(1)