pass slotProps to renderInput function

sai6855 · Nov 27, 2024 · 5208463 · 5208463
1 parent f9367be
commit 5208463
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 67 deletions.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
@@ -75,13 +75,22 @@ export interface AutocompleteRenderInputParams {
   disabled: boolean;
   fullWidth: boolean;
   size: 'small' | undefined;
+  /**
+   * @deprecated Use the `slotProps.inputLabel` instead.
+   */
   InputLabelProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
+  /**
+   * @deprecated Use the `slotProps.input` instead.
+   */
   InputProps: {
     ref: React.Ref<any>;
     className: string;
     startAdornment: React.ReactNode;
     endAdornment: React.ReactNode;
   };
+  /**
+   * @deprecated Use the `slotProps.htmlInput` instead.
+   */
   inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
 }
 

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -719,6 +719,54 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     );
   }
 
+  const renderInputParams = {
+    InputLabelProps: getInputLabelProps(),
+    InputProps: {
+      ref: setAnchorEl,
+      className: classes.inputRoot,
+      startAdornment,
+      onMouseDown: (event) => 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(),
+    },
+  };
+
   return (
     <React.Fragment>
       <AutocompleteRoot
@@ -732,50 +780,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           disabled,
           fullWidth: true,
           size: size === 'small' ? 'small' : undefined,
-          InputLabelProps: getInputLabelProps(),
-          InputProps: {
-            ref: setAnchorEl,
-            className: classes.inputRoot,
-            startAdornment,
-            onMouseDown: (event) => 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(),
+          ...renderInputParams,
+          slotProps: {
+            input: renderInputParams.InputProps,
+            inputLabel: renderInputParams.InputLabelProps,
+            htmlInput: renderInputParams.inputProps,
           },
         })}
       </AutocompleteRoot>

diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js
@@ -142,30 +142,12 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
   const externalForwardedProps = {
     slots,
     slotProps: {
+      input: InputPropsProp,
+      inputLabel: InputLabelPropsProp,
+      htmlInput: inputPropsProp,
+      formHelperText: FormHelperTextPropsProp,
+      select: SelectPropsProp,
       ...slotProps,
-      input:
-        typeof slotProps.input === 'function'
-          ? slotProps.input
-          : { ...(InputPropsProp ?? {}), ...(slotProps.input ?? {}) },
-      inputLabel:
-        typeof slotProps.inputLabel === 'function'
-          ? slotProps.inputLabel
-          : { ...(InputLabelPropsProp ?? {}), ...(slotProps.inputLabel ?? {}) },
-      htmlInput:
-        typeof slotProps.htmlInput === 'function'
-          ? slotProps.htmlInput
-          : { ...(inputPropsProp ?? {}), ...(slotProps.htmlInput ?? {}) },
-      formHelperText:
-        typeof slotProps.formHelperText === 'function'
-          ? slotProps.formHelperText
-          : {
-              ...(FormHelperTextPropsProp ?? {}),
-              ...(slotProps.formHelperText ?? {}),
-            },
-      select:
-        typeof slotProps.select === 'function'
-          ? slotProps.select
-          : { ...(SelectPropsProp ?? {}), ...(slotProps.select ?? {}) },
     },
   };