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, 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, 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, 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('') }) + it('should only accept numerical characters if the input type is number', () => { + const valueFacet = createFacet({ initialValue: 'e' }) + render() + + expect(root?.innerHTML ?? '').toBe('') + valueFacet.set('1') + expect(root?.innerHTML ?? '').toBe('') + valueFacet.set('1e') + expect(root?.innerHTML ?? '').toBe('') + valueFacet.set('12') + expect(root?.innerHTML ?? '').toBe('') + }) + it('sets rows', () => { const rowsFacet = createFacet({ initialValue: 10 })