Mui input base text area style is not applied correctly with input props on 5.15.11 from 5.15.10

[TangMichael]

Steps to reproduce

Link to live example: (required)
https://stackblitz.com/edit/react-qhoqwr?file=Demo.tsx

Steps:

1. Use material-ui 5.15.11 or higher
2. Add multiline props to make a text area to the input base
3. add inputProps with style and height of 100

Current behavior

Height of the component is bigger than 100

Expected behavior

Height should be at 100

Context

Re-making the issue as it was closed previously and I did not get an answer regarding this change of behaviour.

It looks like the first textarea does not contain the style applied to it. I would think it would work fine with the fix done here: #41369

If you were to use the dependency of @mui/material to 5.15.10, using the same props, the textarea will correctly be at 100px. Here is another stackblitz with the dependency updated.

https://stackblitz.com/edit/react-qhoqwr-pewfah?file=package.json

I did not see anything in the release note between 5.15.10 and 5.15.11 that would do this change. Is it possible I am missing something when doing this change?

This is how it looks like with mui 5.15.10

With the exact same code but changing the mui version to 5.15.11+, this is how it looks like:

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: input base, text area

[DiegoAndai]

@ZeeshanTamboli this broke in #40789 and, for some reason #41369 didn't fix it. May I ask you to take a look? Weirdly, the height seems to be multiplied x4 🤔

[ZeeshanTamboli]

I think I know why this broke. But before explaining, @TangMichael, why are you applying the height style when the rows prop already determines the textarea height using the rows value?

[TangMichael]

@ZeeshanTamboli We used the height style to have a more precise size to match the designs to the pixels. Can the rows value be used to do the same?

After seeing your comments with the rows, I can see that the height of the style is multiplied by the rows number which is why on v5.15.11+, the height is 400 when I have rows set to 4 and the style of the height set to 100.

[ZeeshanTamboli]

If you want the height to match the design exactly, why are you using the rows prop?

[TangMichael]

The codebase already contained those two props and it worked fine so it was kept like this. We only noticed this issue when upgrading the library version.

I can remove one of the other if that fixes the issue. Would you say this is intended behaviour starting from 5.15.11+?

[ZeeshanTamboli]

Would you say this is intended behaviour starting from 5.15.11+?

This is the correct behavior. It was incorrect before 5.15.11, and the new logic in #40789 exposed this improper prop usage. Either provide a static height using the height style or let the textarea determine its height using the rows attribute. The combination of both doesn't make sense. I think we can close this issue.