[TextField] Improve baseline alignment with start adornment (#24742)

mui · Feb 3, 2021 · 2eca4a9 · 2eca4a9
1 parent e7bf469
commit 2eca4a9
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 2 deletions.
diff --git 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>

diff --git 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
@@ -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>
+  );
+}