Skip to content

Fix <AutocompleteInput> should not break when overriding input slot props#10793

Merged
djhi merged 1 commit intomasterfrom
fix-AutocompleteInput-slotProps-override
Jun 20, 2025
Merged

Fix <AutocompleteInput> should not break when overriding input slot props#10793
djhi merged 1 commit intomasterfrom
fix-AutocompleteInput-slotProps-override

Conversation

@slax57
Copy link
Contributor

@slax57 slax57 commented Jun 19, 2025

Problem

Fix #10789

With MUI v6 or v7, passing custom input slot props to <AutocompleteInput> breaks its autocomplete feature (the dropdown list doesn't open anymore)

Solution

With MUI v6 or v7 the InputProps need to be forwarded as slotProps.input (as opposed to InputProps with MUI v5). With the previous implementation, passing custom slotProps.input as TextFieldProps would completely override the slotProps and hence loose the params injected by MUI.

The solution consists in injecting the input props at both places, to support all MUI versions.

The only catch is we should only pass a slotProps prop if one was passed to TextFieldProps (i.e. if the user is using the v6/v7 syntax), otherwise we would get a warning about unknow prop slotProps with MUI v5.

How To Test

To test backward compatibility with MUI v5

Edit examples/simple/src/posts/PostCreate.tsx with the following:

<AutocompleteInput
    label="User"
    create={<CreateUser />}
    openOnFocus={false}
+   TextFieldProps={{
+       InputProps: {
+           startAdornment: <BookIcon />,
+       },
+   }}
/>

Run make run.

Make sure the input still works and the icon is present.

To test forward compatibility with MUI v7

Edit examples/demo/src/reviews/ReviewCreate.tsx with the following:

<AutocompleteInput
    optionText="reference"
    validate={required()}
+   TextFieldProps={{
+       slotProps: {
+           input: {
+               startAdornment: <BookIcon />,
+           },
+       },
+   }}
/>

You may get a TS error about unknown prop slotProps, but this is due to the IDE not properly resolving multiple versions of the MUI types (i.e. it's a monorepo only issue).
You can safely ignore that warning.

Run make run-demo.

Make sure the input still works and the icon is present.

Additional Checks

  • The PR targets master for a bugfix or a documentation fix, or next for a feature
  • The PR includes unit tests (if not possible, describe why) -> Can't target multiple versions of MUI in the tests
  • The PR includes one or several stories (if not possible, describe why) -> Can't target multiple versions of MUI in stories
  • The documentation is up to date

Also, please make sure to read the contributing guidelines.

@slax57 slax57 added the RFR Ready For Review label Jun 19, 2025
@djhi djhi merged commit 048d39f into master Jun 20, 2025
15 checks passed
@djhi djhi deleted the fix-AutocompleteInput-slotProps-override branch June 20, 2025 07:52
@djhi djhi modified the milestones: 5.8.5, 5.9.0 Jun 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

RFR Ready For Review

Development

Successfully merging this pull request may close these issues.

Adding an icon to AutocompleteInput using TextFieldProps turn the autocomplete into a normal text field

2 participants