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

Fix `useInput` default value overrides `null`

Author: slax57

packages/ra-core/src/form/useApplyInputDefaultValues.ts

@@ -46,7 +46,9 @@ export const useApplyInputDefaultValues = ({
         if (
             defaultValue == null ||
             formValue != null ||
-            recordValue != null ||
+            // We check strictly for undefined to avoid setting default value
+            // when the field is null
+            recordValue !== undefined ||
             isDirty
         ) {
             return;

packages/ra-core/src/form/useInput.spec.tsx

@@ -7,6 +7,7 @@ import { testDataProvider } from '../dataProvider';
 import { Form } from './Form';
 import { useInput, InputProps, UseInputValue } from './useInput';
 import { required } from './validation/validate';
+import { DefaultValue } from './useInput.stories';
 
 const Input: FunctionComponent<
     {
@@ -172,30 +173,25 @@ describe('useInput', () => {
 
     describe('defaultValue', () => {
         it('applies the defaultValue when input does not have a value', () => {
-            const onSubmit = jest.fn();
-            render(
-                <CoreAdminContext dataProvider={testDataProvider()}>
-                    <Form onSubmit={onSubmit}>
-                        <Input
-                            source="title"
-                            resource="posts"
-                            defaultValue="foo"
-                        >
-                            {({ id, field }) => {
-                                return (
-                                    <input
-                                        type="text"
-                                        id={id}
-                                        aria-label="Title"
-                                        {...field}
-                                    />
-                                );
-                            }}
-                        </Input>
-                    </Form>
-                </CoreAdminContext>
-            );
-            expect(screen.queryByDisplayValue('foo')).not.toBeNull();
+            render(<DefaultValue initialValue={undefined} />);
+            expect(screen.queryByDisplayValue('default value')).not.toBeNull();
+        });
+
+        it('does not apply the defaultValue when input has a value', () => {
+            render(<DefaultValue initialValue="initial value" />);
+            expect(screen.queryByDisplayValue('default value')).toBeNull();
+            expect(screen.queryByDisplayValue('initial value')).not.toBeNull();
+        });
+
+        it('does not apply the defaultValue when input has an empty string value', () => {
+            render(<DefaultValue initialValue="" />);
+            expect(screen.queryByDisplayValue('default value')).toBeNull();
+        });
+
+        it('does not apply the defaultValue when input has a null value', () => {
+            render(<DefaultValue initialValue={null} />);
+            expect(screen.queryByDisplayValue('default value')).toBeNull();
+            expect(screen.queryByDisplayValue('')).not.toBeNull();
         });
 
         it('does not apply the defaultValue when input has a value of 0', () => {

packages/ra-core/src/form/useInput.stories.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { CoreAdminContext } from '../core';
 import { Form } from './Form';
-import { useInput } from './useInput';
+import { InputProps, useInput } from './useInput';
 
 export default {
     title: 'ra-core/form/useInput',
 };
 
-const Input = ({ source }) => {
-    const { id, field, fieldState } = useInput({ source });
+const Input = (props: InputProps) => {
+    const { id, field, fieldState } = useInput(props);
 
     return (
         <label htmlFor={id}>
@@ -41,3 +41,48 @@ export const Basic = () => {
         </CoreAdminContext>
     );
 };
+
+export const DefaultValue = ({
+    initialValue,
+}: {
+    initialValue: string | null | undefined;
+}) => {
+    const [submittedData, setSubmittedData] = React.useState<any>();
+    return (
+        <CoreAdminContext>
+            <Form
+                record={{ field1: initialValue }}
+                onSubmit={data => setSubmittedData(data)}
+            >
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '1em',
+                        marginBottom: '1em',
+                    }}
+                >
+                    <Input source="field1" defaultValue="default value" />
+                </div>
+                <button type="submit">Submit</button>
+            </Form>
+            <pre>{JSON.stringify(submittedData, null, 2)}</pre>
+        </CoreAdminContext>
+    );
+};
+
+DefaultValue.args = {
+    initialValue: 'valid',
+};
+
+DefaultValue.argTypes = {
+    initialValue: {
+        options: ['valid', 'null', 'undefined'],
+        mapping: {
+            valid: 'initial value',
+            null: null,
+            undefined: undefined,
+        },
+        control: { type: 'select' },
+    },
+};