Merge pull request #6374 from marmelab/fix-use-input-default-value

Fix useInput incorrectly set default value for numbers
marmelab · Jun 21, 2021 · 49810c3 · 49810c3
2 parents a170dae + 54669cf
commit 49810c3
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 4 deletions.
diff --git a/packages/ra-core/src/form/useInput.spec.tsx b/packages/ra-core/src/form/useInput.spec.tsx
@@ -2,9 +2,10 @@ import * as React from 'react';
 import { FunctionComponent, ReactElement } from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Form } from 'react-final-form';
-
+import FormWithRedirect from './FormWithRedirect';
 import useInput, { InputProps } from './useInput';
 import { required } from './validate';
+import { renderWithRedux } from '../../../ra-test/esm';
 
 const Input: FunctionComponent<
     { children: (props: any) => ReactElement } & InputProps
@@ -116,4 +117,122 @@ describe('useInput', () => {
         expect(handleBlur).toHaveBeenCalled();
         expect(formApi.getState().active).toBeUndefined();
     });
+
+    it('applies the defaultValue when input does not have a value', () => {
+        const { queryByDisplayValue } = renderWithRedux(
+            <FormWithRedirect
+                onSubmit={jest.fn()}
+                render={() => {
+                    return (
+                        <Input
+                            source="title"
+                            resource="posts"
+                            defaultValue="foo"
+                        >
+                            {({ id, input }) => {
+                                return (
+                                    <input
+                                        type="text"
+                                        id={id}
+                                        aria-label="Title"
+                                        {...input}
+                                    />
+                                );
+                            }}
+                        </Input>
+                    );
+                }}
+            />
+        );
+        expect(queryByDisplayValue('foo')).not.toBeNull();
+    });
+
+    it('does not apply the defaultValue when input has a value of 0', () => {
+        const { queryByDisplayValue } = renderWithRedux(
+            <FormWithRedirect
+                onSubmit={jest.fn()}
+                record={{ id: 1, views: 0 }}
+                render={() => {
+                    return (
+                        <Input
+                            source="views"
+                            resource="posts"
+                            defaultValue={99}
+                        >
+                            {({ id, input }) => {
+                                return (
+                                    <input
+                                        type="number"
+                                        id={id}
+                                        aria-label="Views"
+                                        {...input}
+                                    />
+                                );
+                            }}
+                        </Input>
+                    );
+                }}
+            />
+        );
+        expect(queryByDisplayValue('99')).toBeNull();
+    });
+
+    it('applies the initialValue when input does not have a value', () => {
+        const { queryByDisplayValue } = renderWithRedux(
+            <FormWithRedirect
+                onSubmit={jest.fn()}
+                render={() => {
+                    return (
+                        <Input
+                            source="title"
+                            resource="posts"
+                            initialValue="foo"
+                        >
+                            {({ id, input }) => {
+                                return (
+                                    <input
+                                        type="text"
+                                        id={id}
+                                        aria-label="Title"
+                                        {...input}
+                                    />
+                                );
+                            }}
+                        </Input>
+                    );
+                }}
+            />
+        );
+        expect(queryByDisplayValue('foo')).not.toBeNull();
+    });
+
+    it('does not apply the initialValue when input has a value of 0', () => {
+        const { queryByDisplayValue } = renderWithRedux(
+            <FormWithRedirect
+                onSubmit={jest.fn()}
+                record={{ id: 1, views: 0 }}
+                render={() => {
+                    return (
+                        <Input
+                            source="views"
+                            resource="posts"
+                            initialValue={99}
+                        >
+                            {({ id, input }) => {
+                                return (
+                                    <input
+                                        type="number"
+                                        id={id}
+                                        aria-label="Views"
+                                        {...input}
+                                    />
+                                );
+                            }}
+                        </Input>
+                    );
+                }}
+            />
+        );
+        expect(queryByDisplayValue('99')).toBeNull();
+    });
 });
diff --git a/packages/ra-core/src/form/useInput.ts b/packages/ra-core/src/form/useInput.ts
@@ -115,17 +115,17 @@ const useInput = ({
     const form = useForm();
     const recordId = record?.id;
     useEffect(() => {
-        if (!!input.value) {
+        if (input.value != null && input.value !== '') {
             return;
         }
         // Apply the default value if provided
         // We use a change here which will make the form dirty but this is expected
         // and identical to what FinalForm does (https://final-form.org/docs/final-form/types/FieldConfig#defaultvalue)
-        if (!!defaultValue) {
+        if (defaultValue != null) {
             form.change(source, defaultValue);
         }
 
-        if (!!initialValue) {
+        if (initialValue != null) {
             form.batch(() => {
                 form.change(source, initialValue);
                 form.resetFieldState(source);