Only accept numerical characters if the input type is number (#112)

Co-authored-by: Paulo Ragonha <paulo@ragonha.me>
Mojang · Mar 9, 2023 · f3d75a8 · f3d75a8
1 parent b16c53e
commit f3d75a8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git 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
@@ -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 })