Handle NaN correctly in input.valueAsNumber setter

jsdom · Dec 28, 2023 · a82deab · a82deab
1 parent 588c6f9
commit a82deab
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 2 deletions.
diff --git a/lib/jsdom/living/nodes/HTMLInputElement-impl.js b/lib/jsdom/living/nodes/HTMLInputElement-impl.js
@@ -483,7 +483,7 @@ class HTMLInputElementImpl extends HTMLElementImpl {
   }
 
   set valueAsNumber(v) {
-    if (!isFinite(v)) {
+    if (!isFinite(v) && !isNaN(v)) {
       throw new TypeError("Failed to set infinite value as Number");
     }
 
@@ -495,7 +495,11 @@ class HTMLInputElementImpl extends HTMLElementImpl {
       ]);
     }
 
-    this._value = this._convertNumberToString(v);
+    if (isNaN(v)) {
+      this._value = "";
+    } else {
+      this._value = this._convertNumberToString(v);
+    }
   }
 
   // https://html.spec.whatwg.org/multipage/input.html#dom-input-stepup

diff --git a/...latform-tests/to-upstream/html/semantics/forms/the-input-element/input-valueasnumber.html b/...latform-tests/to-upstream/html/semantics/forms/the-input-element/input-valueasnumber.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<html>
+  <head>
+    <title>HTMLInputElement valueAsDate</title>
+    <link
+      rel="help"
+      href="https://html.spec.whatwg.org/#dom-input-valueasdate"
+    />
+
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <h3>input_valueAsNumber</h3>
+    <hr />
+    <div id="log"></div>
+
+    <input id="input" type="number" />
+
+    <script>
+      "use strict";
+
+      const numberInput = document.getElementById("input");
+
+      test(() => {
+        assert_equals(
+          numberInput.value,
+          "",
+          "value is empty string by default"
+        );
+        assert_equals(
+          Number.isNaN(numberInput.valueAsNumber),
+          true,
+          "valueAsNumber is NaN by default"
+        );
+
+        numberInput.value = "12";
+
+        assert_equals(
+          numberInput.value,
+          "12",
+          "value gets set correctly when set by value"
+        );
+        assert_equals(
+          numberInput.valueAsNumber,
+          12,
+          "valueAsNumber gets set correctly when set by value"
+        );
+
+        numberInput.valueAsNumber = "15";
+
+        assert_equals(
+          numberInput.value,
+          "15",
+          "value gets set correctly when set by valueAsNumber"
+        );
+        assert_equals(
+          numberInput.valueAsNumber,
+          15,
+          "valueAsNumber gets set correctly when set by valueAsNumber"
+        );
+
+        numberInput.valueAsNumber = NaN;
+
+        assert_equals(
+          numberInput.value,
+          "",
+          "value gets set correctly when valueAsNumber is set to NaN"
+        );
+        assert_equals(
+          Number.isNaN(numberInput.valueAsNumber),
+          true,
+          "valueAsNumber gets set correctly when valueAsNumber is set to NaN"
+        );
+      }, "value and valueAsNumber are setting each other correctly for input[type=number]");
+    </script>
+  </body>
+</html>