Merge pull request #8422 from marmelab/fix-numberinput-format-parse

`NumberInput` not passing `format` and `parse` props to `useInput` call

Author: fzaninotto

packages/ra-ui-materialui/src/input/NumberInput.spec.tsx

@@ -7,6 +7,7 @@ import { AdminContext } from '../AdminContext';
 import { SaveButton } from '../button';
 import { SimpleForm, Toolbar } from '../form';
 import { required } from 'ra-core';
+import { Format, Parse } from './NumberInput.stories';
 
 describe('<NumberInput />', () => {
     const defaultProps = {
@@ -198,7 +199,7 @@ describe('<NumberInput />', () => {
     });
 
     describe('format and parse', () => {
-        it('should get the same value as injected value ', async () => {
+        it('should get the same value as injected value', async () => {
             const onSubmit = jest.fn();
 
             render(
@@ -290,6 +291,31 @@ describe('<NumberInput />', () => {
             });
             expect(onSubmit.mock.calls[0][0].views).toBeNull();
         });
+
+        it('should use custom format function prop', async () => {
+            render(<Format />);
+
+            const input = screen.getByLabelText('resources.posts.fields.views');
+            fireEvent.change(input, { target: { value: 5.6356487 } });
+
+            await waitFor(() => {
+                expect((input as HTMLInputElement).value).toEqual('5.6356487');
+                expect(
+                    (screen.getByDisplayValue('5.64') as HTMLInputElement).value
+                ).toEqual('5.64');
+            });
+        });
+
+        it('should use custom parse function prop', async () => {
+            render(<Parse />);
+
+            const input = screen.getByLabelText('Parse to two decimal');
+            fireEvent.change(input, { target: { value: 5.6356487 } });
+
+            await waitFor(() => {
+                expect((input as HTMLInputElement).value).toEqual('5.64');
+            });
+        });
     });
 
     describe('onChange event', () => {

packages/ra-ui-materialui/src/input/NumberInput.stories.tsx

@@ -313,3 +313,49 @@ export const FieldState = () => (
         </Create>
     </AdminContext>
 );
+
+export const Format = () => (
+    <AdminContext>
+        <Create
+            resource="posts"
+            record={{ id: 123, views: 3.7594157 }}
+            sx={{ width: 600 }}
+        >
+            <SimpleForm>
+                <NumberInput source="views" />
+                <NumberInput
+                    source="views"
+                    label="Two decimals"
+                    format={v =>
+                        isNaN(v) ? 0 : Number(parseFloat(v).toFixed(2))
+                    }
+                    disabled
+                />
+                <FormInspector name="views" />
+            </SimpleForm>
+        </Create>
+    </AdminContext>
+);
+
+export const Parse = () => (
+    <AdminContext>
+        <Create
+            resource="posts"
+            record={{ id: 123, views: 3.77 }}
+            sx={{ width: 600 }}
+        >
+            <SimpleForm>
+                <NumberInput
+                    source="views"
+                    label="Parse to two decimal"
+                    format={v => (v ? String(v) : '0')}
+                    parse={v => {
+                        const float = Number(parseFloat(v).toFixed(2));
+                        return isNaN(float) ? null : float;
+                    }}
+                />
+                <FormInspector name="views" />
+            </SimpleForm>
+        </Create>
+    </AdminContext>
+);

packages/ra-ui-materialui/src/input/NumberInput.tsx

@@ -47,6 +47,8 @@ export const NumberInput = ({
         isRequired,
     } = useInput({
         defaultValue,
+        format,
+        parse,
         onBlur,
         resource,
         source,
@@ -58,7 +60,7 @@ export const NumberInput = ({
 
     // This is a controlled input that renders directly the string typed by the user.
     // This string is converted to a number on change, and stored in the form state,
-    // but that number is not not displayed.
+    // but that number is not displayed.
     // This is to allow transitory values like '1.0' that will lead to '1.02'
 
     // text typed by the user and displayed in the input, unparsed