[Autocomplete] Padding issue with variant="filled" and hiddenLabel

[michael-land]

Related to #21408

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce 🕹

Steps:

1. https://codesandbox.io/s/lucid-franklin-qf5lc?file=/src/Demo.js

[oliviertassinari]

The padding is optimized for the need of the component.

[oliviertassinari]

@xiaoyu-tamu What do you think about this fix?

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 655dbef5e4..a840da5a08 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -110,7 +110,7 @@ export const styles = (theme) => ({
         paddingRight: 52 + 4 + 9,
       },
       '& $input': {
-        padding: '9px 4px',
+        padding: '9.5px 4px',
       },
       '& $endAdornment': {
         right: 9,
@@ -122,6 +122,10 @@ export const styles = (theme) => ({
         padding: '4.5px 4px',
       },
     },
+    '&[class*="MuiFilledInput-root"][class*="MuiInputBase-hiddenLabel"]': {
+      paddingTop: 9,
+      paddingBottom: 9,
+    },
   },
   /* Styles applied to the input element. */
   input: {
diff --git a/packages/material-ui/src/InputBase/InputBase.d.ts b/packages/material-ui/src/InputBase/InputBase.d.ts
index 43a3584592..38b5ac586a 100644
--- a/packages/material-ui/src/InputBase/InputBase.d.ts
+++ b/packages/material-ui/src/InputBase/InputBase.d.ts
@@ -158,9 +158,10 @@ export type InputBaseClassKey =
   | 'error'
   | 'marginDense'
   | 'multiline'
-  | 'fullWidth'
   | 'colorSecondary'
   | 'input'
+  | 'fullWidth'
+  | 'hiddenLabel'
   | 'inputMarginDense'
   | 'inputMultiline'
   | 'inputTypeSearch'
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index af52cbf82c..25eb829f52 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -78,6 +78,8 @@ export const styles = (theme) => {
     fullWidth: {
       width: '100%',
     },
+    /* Styles applied to the root element if `hiddenLabel={true}`. */
+    hiddenLabel: {},
     /* Styles applied to the `input` element. */
     input: {
       font: 'inherit',
@@ -422,6 +424,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
           [classes.multiline]: multiline,
           [classes.adornedStart]: startAdornment,
           [classes.adornedEnd]: endAdornment,
+          [classes.hiddenLabel]: fcs.hiddenLabel,
         },
         className,
       )}

Do you want to work on it? We would need to add a new visual regression test

[fakeharahman]

Hi, I'm new to open source, can I try to solve this issue?

[Segolene-Alquier]

Hey, I see the last comment dates from the 18th of August. Can I make a PR for this one if it hasn't been fixed yet? 🤓

[oliviertassinari]

@Segolene-Alquier thanks for the interest in this issue. We had a similar problem and solution proposed in #22544 however, the pull request that was meant to solve the issue was declined. I have removed the "good first issue" label because it requires further discussion.

From what I understand, the solution that relies on a globale CSS selector was declined by @eps1lon because developers can customize them to whatever they want (rarely done). If a developer does such, he would break my previous proposed solution.

I see two possible directions going forward:

1. We anticipate that in v5, we have hard-coded class names with no options to remove the default ones (can only add). I'm not entirely sure yet that we will do such cc @mnajdova.
2. We refactor the input components logic to have two modes. One mode where the <input> takes the whole space available, the default. And a second mode for the Autocomplete and TextareaAutosize. It's more work, riskier but has potential.