[TextField] Autocomplete does not allow the select to open when text field uses input slotProps (any of them)

[chaim0m]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-eomwegjs?file=Demo.tsx
2. Click on Autocomplete, select will not open.

Current behavior

Clicking on Autocomplete when input is provided to TextField component does not open the list.

Expected behavior

When clicking on the TextField the list should open (in this case the movies example)

Context

I need to have an auto complete with a custom text field containing end adornments.

Your environment

Forked on stackblitz from MUI autocomplete example.

Search keywords: TextField, slotProps, AutoComplete

[DiegoAndai]

Hey @chaim0m, thanks for the report!

There's a typo in your example:

<Autocomplete
      disablePortal
      options={top100Films}
      sx={{ width: 300 }}
      renderInput={(params) => (
        <TextField
          {...params}
          slotProps={{
            input: {
-              ...params.inputProps,
+              ...params.InputProps,
              endAdornment: (
                <>
                  {'$'}
                  {params.InputProps?.endAdornment}
                </>
              ),
            },
          }}
          label="Movie"
        />
      )}
    />

Let me know if this fixes the issue.

[chaim0m]

Hey @chaim0m, thanks for the report!

There's a typo in your example:

<Autocomplete
disablePortal
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
slotProps={{
input: {

•          ...params.inputProps,
  

•          ...params.InputProps,
          endAdornment: (
            <>
              {'$'}
              {params.InputProps?.endAdornment}
            </>
          ),
        },
      }}
      label="Movie"
    />
  )}
  

  />
  Let me know if this fixes the issue.

Thank you for pointing this out unfortunately this does not solve the issue.

[DiegoAndai]

@chaim0m that's unfortunate, can you share a repro? I got it working by only changing this: https://stackblitz.com/edit/react-eomwegjs-t38yjgeg?file=Demo.tsx

[eneaaliko0]

Hey @chaim0m, thanks for the report!

There's a typo in your example:

<Autocomplete
disablePortal
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
slotProps={{
input: {

•          ...params.inputProps,
  

•          ...params.InputProps,
          endAdornment: (
            <>
              {'$'}
              {params.InputProps?.endAdornment}
            </>
          ),
        },
      }}
      label="Movie"
    />
  )}
  

  />
  Let me know if this fixes the issue.

Thanks @DiegoAndai for this solution, I think this solves the problem of using input inside slotProps of TextField when it is used in Autocomplete. But if I am creating a custom TextField which I will need to use in renderInput of Autocomplete, ...others?.InputProps will show as deprecated props since this is a prop that is deprecated from TextField
Is it possible for her to immediately pass props from params of input like so:
...params?.input, from Autocomplete to TextField ?

From the migration docs I have done I have simply implemented from inputProps={...} to slotProps={input:{...}}, I don't understand why this should affect the endAdornment of the TextField when using Autocomplete or DatePicker, if this is the only solution please consider improving the documentation of the migration about this props.

Thank you!

[DiegoAndai]

Hey @eneaaliko0, thanks for reaching out.

I don't understand your situation 100%. Could you provide a minimal reproduction? This would help a lot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point.

What I can say about some param.InputProps being deprecated is that we will update it soon, we're still working on it, you can follow the progress here: #41281