From f3d75a8522694ade708d332c4c16c3eb65defdef Mon Sep 17 00:00:00 2001
From: Viktor Bergehall <v-vbergehall@microsoft.com>
Date: Thu, 9 Mar 2023 12:47:33 +0100
Subject: [PATCH] Only accept numerical characters if the input type is number
 (#112)

Co-authored-by: Paulo Ragonha <paulo@ragonha.me>
---
 .../dom-fiber/src/setupAttributes.ts          | 35 +++++++++----------
 .../dom-fiber/src/setupHostConfig.spec.tsx    | 13 +++++++
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/packages/@react-facet/dom-fiber/src/setupAttributes.ts b/packages/@react-facet/dom-fiber/src/setupAttributes.ts
index 37e22968..9fc3a292 100644
--- a/packages/@react-facet/dom-fiber/src/setupAttributes.ts
+++ b/packages/@react-facet/dom-fiber/src/setupAttributes.ts
@@ -52,27 +52,26 @@ export const setupRowsUpdate = (rows: FacetProp<number | undefined>, element: HT
  * so we need to set the `value` attribute directly to solve this.
  * ref: https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMInput.js
  */
-export const setupValueUpdate = (value: FacetProp<string | undefined>, element: HTMLElement | SVGElement) => {
-  if (isFacet(value)) {
-    return value.observe((value) => {
-      const inputElement = element as HTMLInputElement
-      inputElement.value = value != null ? value : ''
 
-      if (value != null) {
-        inputElement.setAttribute('value', value)
-      } else {
-        inputElement.removeAttribute('value')
-      }
-    })
+const updateValue = (element: HTMLElement | SVGElement, value: string | undefined) => {
+  const inputElement = element as HTMLInputElement
+  // Only accept numerical characters if the input type is number
+  if (inputElement.type === 'number' && isNaN(Number(value))) return
+
+  if (value != null) {
+    inputElement.value = value
+    inputElement.setAttribute('value', value)
   } else {
-    const inputElement = element as HTMLInputElement
-    inputElement.value = value != null ? value : ''
+    inputElement.value = ''
+    inputElement.removeAttribute('value')
+  }
+}
 
-    if (value != null) {
-      inputElement.setAttribute('value', value)
-    } else {
-      inputElement.removeAttribute('value')
-    }
+export const setupValueUpdate = (value: FacetProp<string | undefined>, element: HTMLElement | SVGElement) => {
+  if (isFacet(value)) {
+    return value.observe((value) => updateValue(element, value))
+  } else {
+    updateValue(element, value)
   }
 }
 
diff --git a/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx b/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx
index 70c01204..87794304 100644
--- a/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx
+++ b/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx
@@ -380,6 +380,19 @@ describe('mount', () => {
       expect(root?.innerHTML ?? '').toBe('<input maxlength="20" type="text">')
     })
 
+    it('should only accept numerical characters if the input type is number', () => {
+      const valueFacet = createFacet({ initialValue: 'e' })
+      render(<fast-input type="number" value={valueFacet} />)
+
+      expect(root?.innerHTML ?? '').toBe('<input type="number">')
+      valueFacet.set('1')
+      expect(root?.innerHTML ?? '').toBe('<input type="number" value="1">')
+      valueFacet.set('1e')
+      expect(root?.innerHTML ?? '').toBe('<input type="number" value="1">')
+      valueFacet.set('12')
+      expect(root?.innerHTML ?? '').toBe('<input type="number" value="12">')
+    })
+
     it('sets rows', () => {
       const rowsFacet = createFacet({ initialValue: 10 })