Material-ui: [TextField] Underline misalignment when Divider present

[esseswann]

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

Current Behavior 😯

It seems that when using <TextField select={true} /> and when there is a <Divider /> element somewhere in the tree above the underline is one pixel off

The same is happening to the Filled variant

Expected Behavior 🤔

The elements should be colinear despite presence of Divider anywhere on the tree

Steps to Reproduce 🕹

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.11 |
| React | v16.13.1 |
| Browser | Chrome 81.0.4044.122 |

[oliviertassinari]

It looks alright in my env.

[esseswann]

I just checked it on a Linux machine and it looks ok there. It seems to be present on Windows
This is latest Chrome 81.0.4044.122 in Incognito (no extensions) from current master on Win10

It is not present on Edge though

[marcosvega91]

It seams a problem of height. If you try to change the zoom of the page you can see the error.
I think that something like this can solve

+++ b/packages/material-ui/src/TextField/TextField.js
@@ -20,6 +20,9 @@ const variantComponent = {
 export const styles = {
   /* Styles applied to the root element. */
   root: {},
+  fullHeight: {
+    height: "100%",
+  },
 };

 /**
@@ -149,6 +152,10 @@ const TextField = React.forwardRef(function TextField(props, ref) {
       inputProps={inputProps}
       {...InputMore}
       {...InputProps}
+       className={clsx(
+         classes.fullHeight,
+         InputProps?.className,
+       )}
     />
   );

@@ -179,6 +186,10 @@ const TextField = React.forwardRef(function TextField(props, ref) {
           value={value}
           input={InputElement}
           {...SelectProps}
+           className={clsx(
+             classes.fullHeight,
+             SelectProps?.className,
+           )}
         >
           {children}
         </Select>

[oliviertassinari]

@marcosvega91 Looking at the history, it seems that we can remove an older patch for #13302:

diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
index 00464905b..8d86decaf 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -58,7 +58,6 @@ export const styles = (theme) => ({
   },
   /* Styles applied to the select component `selectMenu` class. */
   selectMenu: {
-    height: 'auto', // Reset
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',

Would that work?

[esseswann]

@marcosvega91 I noticed that simple removal of height: auto helps, but git blame shows that that this is some kind of native-select fix for FF. I am not sure that it is still actual because removing it does not break anything

--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -58,7 @@ export const styles = (theme) => ({
   },
   /* Styles applied to the select component `selectMenu` class. */
   selectMenu: {
-    height: 'auto', // Reset
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',

[oliviertassinari]

@esseswann I have just tested it, it seems that we fixed the issue later on by forcing the height. I think that we can move forward.

[esseswann]

Seems to be working on the variant=filled aswell

@oliviertassinari So does anybody make a pull request? :)

[oliviertassinari]

does anybody make a pull request? :)

@esseswann Priority to the author of the issues ;)

[esseswann]

I was checking it for NativeSelect and accidentally noticed that NativeSelect from current master no longer works, the dropdown is not opening onClick. It works on the website though. FF\Edge also seem to be broken
I did not apply any fixes, might be a separate issue

[oliviertassinari]

@esseswann Solved in #20777.