Merge pull request #1619 from SenseNet/fix/2105-number-field

Allow comma in number inputs
SenseNet · Jun 11, 2024 · 0db3462 · 0db3462
2 parents 5e36c21 + d4ac292
commit 0db3462
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/packages/sn-controls-react/src/fieldcontrols/number.tsx b/packages/sn-controls-react/src/fieldcontrols/number.tsx
@@ -25,10 +25,10 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
   const [value, setValue] = useState(initialState)
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement>) => {
-    setValue(e.target.value)
+    const inputValue = e.target.value.replace(/[^0-9.,]/g, '')
+    setValue(inputValue)
     props.fieldOnChange?.(props.settings.Name, e.target.value)
   }
-
   /**
    * Returns steps value by decimal and step settings
    */
@@ -60,7 +60,7 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
           <TextField
             autoFocus={props.autoFocus}
             name={props.settings.Name}
-            type="number"
+            type="text"
             label={props.settings.DisplayName}
             value={value}
             required={props.settings.Compulsory}

diff --git a/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`Number field control in edit/new view should set all the props 1`] = `
     onChange={[Function]}
     placeholder="0"
     required={true}
-    type="number"
+    type="text"
     value={7}
   />
   <WithStyles(ForwardRef(FormHelperText))>

diff --git a/packages/sn-controls-react/test/number.test.tsx b/packages/sn-controls-react/test/number.test.tsx
@@ -101,7 +101,7 @@ describe('Number field control', () => {
       const wrapper = shallow(
         <NumberField actionName="edit" fieldOnChange={fieldOnChange} settings={defaultSettings} />,
       )
-      wrapper.find(TextField).simulate('change', { target: { value: 2 } })
+      wrapper.find(TextField).simulate('change', { target: { value: '2' } })
       expect(fieldOnChange).toBeCalled()
     })
   })