diff --git a/packages/js/product-editor/changelog/fix-invalid-characters-number-control b/packages/js/product-editor/changelog/fix-invalid-characters-number-control new file mode 100644 index 00000000000..54259c83acb --- /dev/null +++ b/packages/js/product-editor/changelog/fix-invalid-characters-number-control @@ -0,0 +1,5 @@ +Significance: patch +Type: fix +Comment: Fix invalid value being propagated on change event for number input + + diff --git a/packages/js/product-editor/src/hooks/use-number-input-props.ts b/packages/js/product-editor/src/hooks/use-number-input-props.ts index 8149d1a91b2..ef6ee9f8ed0 100644 --- a/packages/js/product-editor/src/hooks/use-number-input-props.ts +++ b/packages/js/product-editor/src/hooks/use-number-input-props.ts @@ -19,6 +19,8 @@ type Props = { onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void; }; +const NOT_NUMBERS_OR_SEPARATORS_REGEX = /[^0-9,.]/g; + export const useNumberInputProps = ( { value, onChange, @@ -56,7 +58,9 @@ export const useNumberInputProps = ( { } }, onChange( newValue: string ) { - const sanitizeValue = parseNumber( newValue ); + const sanitizeValue = parseNumber( + newValue.replace( NOT_NUMBERS_OR_SEPARATORS_REGEX, '' ) + ); onChange( sanitizeValue ); }, };