[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.