Skip to content

Commit abe322f

Browse files
committed
fix(mui): support MUI v7+ slotProps in Autocomplete renderInput
MUI v7 replaced the Autocomplete renderInput params `InputProps`/`inputProps` with `slotProps.input`/`slotProps.htmlInput`. Reading `params.InputProps.endAdornment` therefore throws on MUI v7+ (incl. v9), crashing any Autocomplete value widget. Detect the params shape and emit the correct props, keeping MUI v5/v6 behavior unchanged. Fixes #1324
1 parent 446689d commit abe322f

1 file changed

Lines changed: 42 additions & 14 deletions

File tree

packages/mui/modules/widgets/value/MuiAutocomplete.jsx

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -103,25 +103,53 @@ export default (props) => {
103103
const selectedTitle = selectedListValue?.title ?? value?.toString() ?? "";
104104
const shouldHide = multiple && !open;
105105
const renderValue = shouldRenderSelected ? selectedTitle : (shouldHide ? "" : inputValue ?? value?.toString() ?? "");
106-
return (
107-
<TextField
108-
variant="standard"
109-
{...params}
110-
inputProps={{
106+
107+
// MUI v7 replaced TextField/Autocomplete `InputProps`/`inputProps` with `slotProps.input`/`slotProps.htmlInput`,
108+
// and the `renderInput` params follow the same change. Support both shapes so the widget keeps working on
109+
// MUI v5/v6 (InputProps/inputProps) as well as v7+ (slotProps).
110+
const useSlotProps = params.slotProps != null;
111+
const inheritedInputProps = (useSlotProps ? params.slotProps.input : params.InputProps) ?? {};
112+
const endAdornment = (
113+
<React.Fragment>
114+
{isLoading ? <CircularProgress color="inherit" size={20} /> : null}
115+
{inheritedInputProps.endAdornment}
116+
</React.Fragment>
117+
);
118+
119+
const compatInputProps = useSlotProps
120+
? {
121+
slotProps: {
122+
...params.slotProps,
123+
htmlInput: {
124+
"aria-label": ariaLabel,
125+
...params.slotProps.htmlInput,
126+
value: renderValue,
127+
},
128+
input: {
129+
...params.slotProps.input,
130+
readOnly: readonly,
131+
endAdornment,
132+
},
133+
},
134+
}
135+
: {
136+
inputProps: {
111137
"aria-label": ariaLabel,
112138
...params.inputProps,
113139
value: renderValue,
114-
}}
115-
InputProps={{
140+
},
141+
InputProps: {
116142
...params.InputProps,
117143
readOnly: readonly,
118-
endAdornment: (
119-
<React.Fragment>
120-
{isLoading ? <CircularProgress color="inherit" size={20} /> : null}
121-
{params.InputProps.endAdornment}
122-
</React.Fragment>
123-
),
124-
}}
144+
endAdornment,
145+
},
146+
};
147+
148+
return (
149+
<TextField
150+
variant="standard"
151+
{...params}
152+
{...compatInputProps}
125153
size={renderSize}
126154
disabled={readonly}
127155
placeholder={placeholder}

0 commit comments

Comments
 (0)