Merge pull request #9559 from marmelab/fix-autocomplete-input-props-a…

…re-overrided fix: keep autocomplete behavior even if custom InputProps are set
marmelab · Jan 5, 2024 · bb68925 · bb68925
2 parents 767e459 + cb9863a
commit bb68925
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 38 deletions.
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -1592,9 +1592,11 @@ describe('<AutocompleteInput />', () => {
     describe('InputProps', () => {
         it('should pass InputProps to the input', async () => {
             render(<WithInputProps />);
-            await screen.findByRole('textbox');
+            const input = await screen.findByRole('textbox');
             screen.getByTestId('AttributionIcon');
             screen.getByTestId('ExpandCircleDownIcon');
+            fireEvent.click(input);
+            screen.getByText('Victor Hugo');
         });
     });
 });
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -1221,12 +1221,25 @@ export const WithInputProps = () => {
                                 TextFieldProps={{
                                     InputProps: {
                                         startAdornment: (
-                                            <InputAdornment position="end">
+                                            <InputAdornment
+                                                position="start"
+                                                sx={{
+                                                    position: 'relative',
+                                                    top: '-8px',
+                                                }}
+                                            >
                                                 <AttributionIcon />
                                             </InputAdornment>
                                         ),
                                         endAdornment: (
-                                            <InputAdornment position="end">
+                                            <InputAdornment
+                                                position="end"
+                                                sx={{
+                                                    position: 'relative',
+                                                    top: '-8px',
+                                                    left: '50px',
+                                                }}
+                                            >
                                                 <ExpandCircleDownIcon />
                                             </InputAdornment>
                                         ),

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -560,42 +560,51 @@ If you provided a React element for the optionText prop, you must also provide t
                 id={id}
                 isOptionEqualToValue={isOptionEqualToValue}
                 filterSelectedOptions
-                renderInput={params => (
-                    <TextField
-                        name={field.name}
-                        label={
-                            <FieldTitle
-                                label={label}
-                                source={source}
-                                resource={resourceProp}
-                                isRequired={isRequired}
-                            />
-                        }
-                        error={
-                            !!fetchError ||
-                            ((isTouched || isSubmitted) && invalid)
-                        }
-                        helperText={
-                            renderHelperText ? (
-                                <InputHelperText
-                                    touched={
-                                        isTouched || isSubmitted || fetchError
-                                    }
-                                    error={
-                                        error?.message || fetchError?.message
-                                    }
-                                    helperText={helperText}
+                renderInput={params => {
+                    const mergedTextFieldProps = {
+                        ...params.InputProps,
+                        ...TextFieldProps?.InputProps,
+                    };
+                    return (
+                        <TextField
+                            name={field.name}
+                            label={
+                                <FieldTitle
+                                    label={label}
+                                    source={source}
+                                    resource={resourceProp}
+                                    isRequired={isRequired}
                                 />
-                            ) : null
-                        }
-                        margin={margin}
-                        variant={variant}
-                        className={AutocompleteInputClasses.textField}
-                        {...params}
-                        {...TextFieldProps}
-                        size={size}
-                    />
-                )}
+                            }
+                            error={
+                                !!fetchError ||
+                                ((isTouched || isSubmitted) && invalid)
+                            }
+                            helperText={
+                                renderHelperText ? (
+                                    <InputHelperText
+                                        touched={
+                                            isTouched ||
+                                            isSubmitted ||
+                                            fetchError
+                                        }
+                                        error={
+                                            error?.message ||
+                                            fetchError?.message
+                                        }
+                                        helperText={helperText}
+                                    />
+                                ) : null
+                            }
+                            margin={margin}
+                            variant={variant}
+                            className={AutocompleteInputClasses.textField}
+                            {...params}
+                            InputProps={mergedTextFieldProps}
+                            size={size}
+                        />
+                    );
+                }}
                 multiple={multiple}
                 renderTags={(value, getTagProps) =>
                     value.map((option, index) => (