Repository: mui/material-ui (TypeScript)
Date: 2021-02-02 10:40:12+00:00
Task type: Bug Fix

Issue:
[TextField] Improve baseline alignement with start adornment
- [x] The issue is present in the latest (alpha) release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

https://codesandbox.io/s/basicdatepicker-material-demo-forked-yxkfx?fontsize=14&hidenavigation=1&theme=dark

![image](https://user-images.githubusercontent.com/2501211/106367066-69dbc780-6340-11eb-898e-8f5f3e28ac33.png)

## Expected Behavior 🤔

In the first line, the "Test" string should be at the same vertical position as the picker's text. Of course this also affects text behind the picker. When position=end, everything seems to work fine.

## Steps to Reproduce 🕹

See demo link above. The essence is:

```
<div style={{display: 'flex', alignItems: 'baseline'}}>
  Test
  <DatePicker InputAdornmentProps={{position: 'start'}}/>
</div>
```

## Your Environment 🌎

Latest Chrome browser, otherwise see codesandbox.


Issue discussion:
@Philipp91 Interesting, I think that it would make sense to use the same fix as we used in the Select: #16743.

```diff
diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js
index 4d04077933..27b7be2a61 100644
--- a/packages/material-ui/src/InputAdornment/InputAdornment.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.js
@@ -90,7 +90,15 @@ const InputAdornment = React.forwardRef(function InputAdornment(props, ref) {
         {typeof children === 'string' && !disableTypography ? (
           <Typography color="textSecondary">{children}</Typography>
         ) : (
-          children
+          <React.Fragment>
+            {/* To have the correct vertical aligment baseline */}
+            {position === 'start' ? (
+              /* notranslate needed while Google Translate will not fix zero-width space issue */
+              /* eslint-disable-next-line react/no-danger */
+              <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+            ) : null}
+            {children}
+          </React.Fragment>
         )}
       </Component>
     </FormControlContext.Provider>
```

tested on Chrome, Firefox, Safari

<img width="355" alt="Capture d’écran 2021-01-31 à 19 32 48" src="https://user-images.githubusercontent.com/3165635/106394100-21cdab00-63fb-11eb-9121-c87db1d54557.png">

Also, adding a quick visual regression test wouldn't harm. It's not an obvious problem.

Solution patch:
diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js
--- a/packages/material-ui/src/InputAdornment/InputAdornment.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.js
@@ -90,7 +90,15 @@ const InputAdornment = React.forwardRef(function InputAdornment(props, ref) {
         {typeof children === 'string' && !disableTypography ? (
           <Typography color="textSecondary">{children}</Typography>
         ) : (
-          children
+          <React.Fragment>
+            {/* To have the correct vertical alignment baseline */}
+            {position === 'start' ? (
+              /* notranslate needed while Google Translate will not fix zero-width space issue */
+              /* eslint-disable-next-line react/no-danger */
+              <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+            ) : null}
+            {children}
+          </React.Fragment>
         )}
       </Component>
     </FormControlContext.Provider>


Test patch:
diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.test.js b/packages/material-ui/src/InputAdornment/InputAdornment.test.js
--- a/packages/material-ui/src/InputAdornment/InputAdornment.test.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.test.js
@@ -166,7 +166,7 @@ describe('<InputAdornment />', () => {
 
   it('should render children', () => {
     const { container } = render(
-      <InputAdornment position="start">
+      <InputAdornment position="end">
         <div>foo</div>
       </InputAdornment>,
     );
@@ -175,6 +175,21 @@ describe('<InputAdornment />', () => {
     expect(adornment.firstChild).to.have.property('nodeName', 'DIV');
   });
 
+  describe('prop: position', () => {
+    it('should render span for vertical baseline alignment', () => {
+      const { container } = render(
+        <InputAdornment position="start">
+          <div>foo</div>
+        </InputAdornment>,
+      );
+      const adornment = container.firstChild;
+
+      expect(adornment.firstChild).to.have.tagName('span');
+      expect(adornment.firstChild).to.have.class('notranslate');
+      expect(adornment.childNodes[1]).to.have.tagName('div');
+    });
+  });
+
   it('applies a size small class inside <FormControl size="small" />', () => {
     const { getByTestId } = render(
       <FormControl size="small">
diff --git a/test/regressions/tests/TextField/BaselineAlignTextField.js b/test/regressions/tests/TextField/BaselineAlignTextField.js
new file mode 100644
--- /dev/null
+++ b/test/regressions/tests/TextField/BaselineAlignTextField.js
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Visibility from '@material-ui/icons/Visibility';
+import InputAdornment from '@material-ui/core/InputAdornment';
+
+export default function BaselineAlignTextField() {
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'baseline',
+        }}
+      >
+        Base
+        <TextField
+          label="label"
+          placeholder="placeholder"
+          variant="standard"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <Visibility />
+              </InputAdornment>
+            ),
+          }}
+        />
+        Base
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'baseline',
+        }}
+      >
+        Base
+        <TextField
+          label="label"
+          placeholder="placeholder"
+          variant="standard"
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <Visibility />
+              </InputAdornment>
+            ),
+          }}
+        />
+        Base
+      </div>
+    </div>
+  );
+}