[Autocomplete] Migrating from deprecated InputProps breaks default Autocomplete adornments with wrapper TextField

[Buster-Darragh-Major]

Steps to reproduce

Steps:

• Example 1: Uses props.InputProps to pass through default input fields from AutoComplete
• Example 2: Uses props.slotProps.input which fails to pass through default input fields from AutoComplete

Note: Observe how we have only changed references from props.InputProps → props.slotProps?.input between examples

1. See rendered Example 1 and observe how there is the dropdown icon the the right of someOtherEndAdornment and clicking this icon successfully drops down the options
2. See rendered Example 2 and observe how there is NO dropdown icon the the right of someOtherEndAdornment and clicking this icon fails to drop down the options

Current behavior

We construct a wrapper class around TextField which does some custom rendering of endAdornments. Using this custom TextField as the renderInput result for an AutoComplete will only be possible when referencing the deprecated props.InputProps.

This is because, when debugging we observed that the default AutoComplete props (which render the dropdown arrow etc) which get passed to the TextField component only exist in InputProps (which is deprecated) and not the newly recommended slotProps.Input.

In our examples because we're creating a wrapper around TextField, it seems impossible for us to be able to pass though these props without referencing a deprecated field.

Expected behavior

I would expect the props passed down via params.InputProps from AutoComplete's renderInput prop to also be accessible via a non deprecated prop (InputProps)

Context

We have made a wrapper component around TextField so we can pass multiple startAdornments and endAdornments at once and do some custom rendering around that. (Is basically the same as Mui's standard TextField except we have arguments startControls={[...]} and endControls={[...]}, the latter of which is in the live examples provided. We plumb these lists of controls through to start and end adornments respectfully).

We are also trying to clear out our deprecated references and can't seem to resolve this issue due to the details described above.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.6.1
  Binaries:
    Node: 21.7.1 - /usr/local/bin/node
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 140.0.7339.133
    Edge: Not Found
    Safari: 18.6
  npmPackages:
    @emotion/react: 11.14.0 => 11.14.0 
    @emotion/styled: 11.14.1 => 11.14.1 
    @mui/core-downloads-tracker:  7.3.2 
    @mui/icons-material: 7.3.2 => 7.3.2 
    @mui/lab: 7.0.0-beta.17 => 7.0.0-beta.17 
    @mui/material: 7.3.2 => 7.3.2 
    @mui/private-theming:  7.3.2 
    @mui/styled-engine:  7.3.2 
    @mui/system: 7.3.2 => 7.3.2 
    @mui/types:  7.4.6 
    @mui/utils:  7.3.1 
    @mui/x-data-grid:  8.11.1 
    @mui/x-data-grid-pro: 8.11.1 => 8.11.1 
    @mui/x-internals:  8.11.1 
    @mui/x-license: 8.11.1 => 8.11.1 
    @mui/x-telemetry:  8.11.0 
    @mui/x-virtualizer:  0.1.5 
    @types/react: 19.1.12 => 19.1.12 
    react: 19.1.1 => 19.1.1 
    react-dom: 19.1.1 => 19.1.1 
    typescript: 5.9.2 => 5.9.2 

Search keywords: InputProps, deprecated, AutoComplete, slotProps, TextField

Order ID: 65425

Search keywords:

[siriwatknp]

Thanks for submitting the issue. It looks valid to me, will need to investigate why Autocomplete still pass props using InputProps instead of slotProps.

[ZeeshanTamboli]

We can fix this issue by moving from InputProps and inputProps to slotProps.input and slotProps.htmlInput respectively in the Autocomplete code:

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.j
s
index 52e3b658c1..d848227d90 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -680,53 +680,58 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           fullWidth: true,
           size: size === 'small' ? 'small' : undefined,
           InputLabelProps: getInputLabelProps(),
-          InputProps: {
-            ref: setAnchorEl,
-            className: classes.inputRoot,
-            startAdornment,
-            onMouseDown: (event) => {
-              if (event.target === event.currentTarget) {
-                handleInputMouseDown(event);
-              }
-            },
-            ...((hasClearIcon || hasPopupIcon) && {
-              endAdornment: (
-                <AutocompleteEndAdornment className={classes.endAdornment} ownerState={ownerState}>
-                  {hasClearIcon ? (
-                    <AutocompleteClearIndicator
-                      {...getClearProps()}
-                      aria-label={clearText}
-                      title={clearText}
-                      ownerState={ownerState}
-                      {...clearIndicatorSlotProps}
-                      className={clsx(classes.clearIndicator, clearIndicatorSlotProps?.className)}
-                    >
-                      {clearIcon}
-                    </AutocompleteClearIndicator>
-                  ) : null}
+          slotProps: {
+            input: {
+              ref: setAnchorEl,
+              className: classes.inputRoot,
+              startAdornment,
+              onMouseDown: (event) => {
+                if (event.target === event.currentTarget) {
+                  handleInputMouseDown(event);
+                }
+              },
+              ...((hasClearIcon || hasPopupIcon) && {
+                endAdornment: (
+                  <AutocompleteEndAdornment
+                    className={classes.endAdornment}
+                    ownerState={ownerState}
+                  >
+                    {hasClearIcon ? (
+                      <AutocompleteClearIndicator
+                        {...getClearProps()}
+                        aria-label={clearText}
+                        title={clearText}
+                        ownerState={ownerState}
+                        {...clearIndicatorSlotProps}
+                        className={clsx(classes.clearIndicator, clearIndicatorSlotProps?.className)}
+                      >
+                        {clearIcon}
+                      </AutocompleteClearIndicator>
+                    ) : null}

-                  {hasPopupIcon ? (
-                    <AutocompletePopupIndicator
-                      {...getPopupIndicatorProps()}
-                      disabled={disabled}
-                      aria-label={popupOpen ? closeText : openText}
-                      title={popupOpen ? closeText : openText}
-                      ownerState={ownerState}
-                      {...popupIndicatorSlotProps}
-                      className={clsx(classes.popupIndicator, popupIndicatorSlotProps?.className)}
-                    >
-                      {popupIcon}
-                    </AutocompletePopupIndicator>
-                  ) : null}
-                </AutocompleteEndAdornment>
-              ),
-            }),
-          },
-          inputProps: {
-            className: classes.input,
-            disabled,
-            readOnly,
-            ...getInputProps(),
+                    {hasPopupIcon ? (
+                      <AutocompletePopupIndicator
+                        {...getPopupIndicatorProps()}
+                        disabled={disabled}
+                        aria-label={popupOpen ? closeText : openText}
+                        title={popupOpen ? closeText : openText}
+                        ownerState={ownerState}
+                        {...popupIndicatorSlotProps}
+                        className={clsx(classes.popupIndicator, popupIndicatorSlotProps?.className)}
+                      >
+                        {popupIcon}
+                      </AutocompletePopupIndicator>
+                    ) : null}
+                  </AutocompleteEndAdornment>
+                ),
+              }),
+            },
+            htmlInput: {
+              className: classes.input,
+              disabled,
+              readOnly,
+              ...getInputProps(),
+            },
           },
         })}
       </AutocompleteRoot>

But this will be a breaking change for people who are still relying on the deprecated InputProps and inputProps in the TextField's renderInput:

      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          slotProps={{
            htmlInput: {
              ...params.inputProps,
              autoComplete: 'new-password', // disable autocomplete and autofill
            },
          }}
        />
      )}

The props are deprecated but they could still be in use. We should make this change in the future major version, where we remove support for InputProps and inputProps.

[ZeeshanTamboli]

Also see comment: #44320 (comment).

[siriwatknp]

Agree, it cannot be fixed in v7.