fix: treat programmatic null input values as empty string

src/document/UI.ts

@@ -19,9 +19,9 @@ export type UIValueString = string & {[UIValue]: true}
 export type UISelectionStart = number & {[UISelection]: true}
 
 export function isUIValue(
-  value: string | UIValueString,
+  value: string | UIValueString | null,
 ): value is UIValueString {
-  return typeof value === 'object' && UIValue in value
+  return !!value && typeof value === 'object' && UIValue in value
 }
 
 export function isUISelectionStart(

src/document/interceptor.ts

@@ -72,8 +72,9 @@ export function prepareInterceptor<
       then,
     } = interceptorImpl.call(this, ...args)
 
-    const realFunc = ((!applyNative && objectDescriptor) ||
-      (prototypeDescriptor as PropertyDescriptor))[target] as (
+    const sourceDescriptor =
+      !applyNative && objectDescriptor ? objectDescriptor : prototypeDescriptor
+    const realFunc = sourceDescriptor?.[target] as (
       this: ElementType,
       ...a: unknown[]
     ) => unknown
@@ -102,18 +103,20 @@ export function prepareValueInterceptor(
     'value',
     function interceptorImpl(
       this: HTMLInputElement | HTMLTextAreaElement,
-      v: UIValueString | string,
+      v: UIValueString | string | null,
     ) {
-      const isUI = isUIValue(v)
+      // `value` is a [LegacyNullToEmptyString] DOMString.
+      const value = v === null ? '' : v
+      const isUI = isUIValue(value)
 
       if (isUI) {
         startTrackValue(this)
       }
 
       return {
         applyNative: !!isUI,
-        realArgs: sanitizeValue(this, v),
-        then: isUI ? undefined : () => trackOrSetValue(this, String(v)),
+        realArgs: sanitizeValue(this, value),
+        then: isUI ? undefined : () => trackOrSetValue(this, String(value)),
       }
     },
   )

tests/document/index.ts

@@ -137,6 +137,30 @@ test('reset UI selection if value is programmatically set', async () => {
   expect(getUISelection(element)).toHaveProperty('startOffset', 6)
 })
 
+test('programmatic `null` value is treated as empty string', async () => {
+  const {element} = render<HTMLInputElement>(`<input value="abc"/>`)
+
+  prepare(element)
+
+  // HTMLInputElement.value is a [LegacyNullToEmptyString] DOMString.
+  // Callers still assign `null` at runtime; the IDL coerces it to `""`.
+  element.value = null as unknown as string
+
+  expect(element).toHaveValue('')
+  expect(getUIValue(element)).toBe('')
+})
+
+test('programmatic `null` value on number input is treated as empty', async () => {
+  const {element} = render<HTMLInputElement>(`<input type="number" value="1"/>`)
+
+  prepare(element)
+
+  element.value = null as unknown as string
+
+  expect(element).toHaveValue(null)
+  expect(getUIValue(element)).toBe('')
+})
+
 test('clear UI selection if selection is programmatically set', async () => {
   const {element} = render<HTMLInputElement>(`<input/>`)