Merge pull request #8439 from kosmotema/input-label

Fix bugs in SearchInput and TextField related to the `label` property
marmelab · Dec 8, 2022 · 833f833 · 833f833
2 parents 1d1b691 + 3e0554e
commit 833f833
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 5 deletions.
diff --git a/packages/ra-ui-materialui/src/input/SearchInput.spec.tsx b/packages/ra-ui-materialui/src/input/SearchInput.spec.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { testDataProvider } from 'ra-core';
+
+import { AdminContext } from '../AdminContext';
+import { SearchInput } from '.';
+import { FilterForm } from '../list';
+
+describe('<SearchInput />', () => {
+    it('should not render label if passed explicit `undefined` value', async () => {
+        const source = 'test';
+
+        const filters = [<SearchInput source={source} label={undefined} />];
+        const displayedFilters = {
+            [source]: true,
+        };
+
+        const { container } = render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <FilterForm
+                    setFilters={jest.fn()}
+                    filters={filters}
+                    displayedFilters={displayedFilters}
+                />
+            </AdminContext>
+        );
+
+        expect(container.querySelector(`label`)).toBeNull();
+    });
+});
diff --git a/packages/ra-ui-materialui/src/input/SearchInput.tsx b/packages/ra-ui-materialui/src/input/SearchInput.tsx
@@ -8,9 +8,11 @@ import { CommonInputProps } from './CommonInputProps';
 import { TextInput, TextInputProps } from './TextInput';
 
 export const SearchInput = (props: SearchInputProps) => {
+    const { label, ...rest } = props;
+
     const translate = useTranslate();
 
-    if (props.label) {
+    if (label) {
         throw new Error(
             "<SearchInput> isn't designed to be used with a label prop. Use <TextInput> if you need a label."
         );
@@ -30,7 +32,7 @@ export const SearchInput = (props: SearchInputProps) => {
                 ),
             }}
             size="small"
-            {...props}
+            {...rest}
         />
     );
 };

diff --git a/packages/ra-ui-materialui/src/input/TextInput.spec.tsx b/packages/ra-ui-materialui/src/input/TextInput.spec.tsx
@@ -166,4 +166,66 @@ describe('<TextInput />', () => {
             expect(input.value).toEqual('bar');
         });
     });
+
+    describe('label', () => {
+        it('should render label when `label` prop not specified', () => {
+            const { container } = render(
+                <AdminContext dataProvider={testDataProvider()}>
+                    <SimpleForm
+                        defaultValues={{ title: 'hello' }}
+                        onSubmit={jest.fn}
+                    >
+                        <TextInput {...defaultProps} />
+                    </SimpleForm>
+                </AdminContext>
+            );
+
+            expect(container.querySelector(`label`)).not.toBeNull();
+        });
+
+        it('should render label when `label` prop is non-empty string', () => {
+            const { container } = render(
+                <AdminContext dataProvider={testDataProvider()}>
+                    <SimpleForm
+                        defaultValues={{ title: 'hello' }}
+                        onSubmit={jest.fn}
+                    >
+                        <TextInput {...defaultProps} label="label" />
+                    </SimpleForm>
+                </AdminContext>
+            );
+
+            expect(container.querySelector(`label`)).not.toBeNull();
+        });
+
+        it('should not render label when `label` prop is `false`', () => {
+            const { container } = render(
+                <AdminContext dataProvider={testDataProvider()}>
+                    <SimpleForm
+                        defaultValues={{ title: 'hello' }}
+                        onSubmit={jest.fn}
+                    >
+                        <TextInput {...defaultProps} label={false} />
+                    </SimpleForm>
+                </AdminContext>
+            );
+
+            expect(container.querySelector(`label`)).toBeNull();
+        });
+
+        it('should not render label when `label` prop is empty string', () => {
+            const { container } = render(
+                <AdminContext dataProvider={testDataProvider()}>
+                    <SimpleForm
+                        defaultValues={{ title: 'hello' }}
+                        onSubmit={jest.fn}
+                    >
+                        <TextInput {...defaultProps} label="" />
+                    </SimpleForm>
+                </AdminContext>
+            );
+
+            expect(container.querySelector(`label`)).toBeNull();
+        });
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/TextInput.tsx b/packages/ra-ui-materialui/src/input/TextInput.tsx
@@ -64,15 +64,14 @@ export const TextInput = (props: TextInputProps) => {
             {...field}
             className={clsx('ra-input', `ra-input-${source}`, className)}
             label={
-                label !== '' &&
-                label !== false && (
+                label !== '' && label !== false ? (
                     <FieldTitle
                         label={label}
                         source={source}
                         resource={resource}
                         isRequired={isRequired}
                     />
-                )
+                ) : null
             }
             error={(isTouched || isSubmitted) && invalid}
             helperText={