[material-ui][Autocomplete] Fix Passing slotProps to the TextField

[sai6855]

closes #43573
Closes #43830
closes mui/mui-x#14684

before: https://stackblitz.com/edit/react-1qmjam?file=Demo.tsx

after: https://codesandbox.io/p/sandbox/smoosh-field-j9qf3y?file=%2Fsrc%2FDemo.tsx

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43606--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against e130ed6

[sai6855]

Issue is props which are set by Autocomplete to input slot or other slots is getting overriden by slotProps object. Instead of overrding i tried to merge inputProps and slotProps.htmlInput and looks like it is working

material-ui/packages/mui-material/src/Autocomplete/Autocomplete.js

Line 778 in f8b2251

inputProps: {

Additionally we also need to migrate usage of InputProps, InputLabelProps to slotProps in Autocomplete, i think, it can be done in seperate PR

[aarongarciah]

Are we doing these checks in other components as well? Do we have some kind of helper for this?

[sai6855]

As far as I know, other components don't have these checks. (Also We don't have any issues reported yet on other components)

Instead of creating new helper, I'm thinking it's better to handle this in useSlotProps hook, so that all slots related logic will be in one place

[aarongarciah]

Thoughts @DiegoAndai?

[DiegoAndai]

The useSlot hook already has merging strategies implemented, but I think the problem here is that the Autocomplete should handle the slot props better:

• Refactor Autocomplete to use slotProps instead of InputProps and inputProps
• Inside Autocomplete, merge slotProps.input and slotProps.htmlInput

const [HtmlInputSlot, htmlInputProps] = useSlot('htmlInput', {
    elementType: 'input',
    externalForwardedProps, // already defined above
    additionalProps: {
        disabled,
        readOnly,
        ...getInputProps(),
    },
    className: classes.input,
    ownerState,
  });

// ...

// line 730
    {renderInput(
     // ...
     // line 778
    slotProps: {
        htmlInput: htmlInputProps,
    },
},

I haven't tested this, but it should be something similar to the code above.

This will be a complex PR, but in the end, the result should be the slots pattern properly implemented in the Autocomplete component.

We're still discussing if the slots pattern needs changes, cc: @aarongarciah, so this PR might require changes in the future given that decision.

Does that make sense @sai6855?

[sai6855]

@DiegoAndai I'm bit confused with this approch. are you imagining renderInput would look something like this after refactoring?

  {renderInput({
          id,
          disabled,
          fullWidth: true,
          size: size === 'small' ? 'small' : undefined,
-          InputLabelProps: getInputLabelProps(),
-          InputProps: {
-          },
-         inputProps: {
-        }
+     slotProps:{
+     htmlInput: htmlInputProps // derived from useSLot
+    input: inputProps // derived from useSLot
+    inputLable: inputLabelProps // derived from useSlot
+ } 
)}

Assuming this is the approach you want to take, I'm not sure it is possible to merge slotProps from renderInput and slotProps defined in user land without doing any changes in userland.

This is how currently users use Autocomplete, after refactoring params will have slotProps key. If i understand your approch you want slotProps in params key and slotProps in highlighted line to be merged inside Autocomplete. As Autocomplete component don't have any control over slotProps in highlighted line, is it possible to merge without changes to be done in userland?

<Autocomplete
      value="one"
      open
      options={['one', 'two']}
      renderInput={(params) => (
+      <TextField {...params} autoFocus slotProps={{ htmlInput: { className: 'my-class' } }} />
      )}
    />

[DiegoAndai]

are you imagining renderInput would look something like this after refactoring?

Yes, exactly that

As Autocomplete component don't have any control over slotProps in highlighted line, is it possible to merge without changes to be done in userland?

I don't understand the issue. Is it that params has a slotProps key as well, so it's overridden?

[DiegoAndai]

Oh ok, I think I see the issue. The Autocomplete structure confused me. Yes, my suggestion is not correct, I was confusing Autocomplete slots with TextField slots.

[DiegoAndai]

@sai6855 I think these should be merged in userland, this was always required, see: #43573 (comment).

Let's wait and see if we can move forward with migrating the usage of InputProps, InputLabelProps to slotProps in Autocomplete

[sai6855]

Got it, apart from migrating *Props to slotProps, i think we should also improve migration guide and if possible add codemod. If x team has made a mistake in migrating then we can expect many such users also done same mistake

[sai6855]

@DiegoAndai what do you think way forward to this PR?