fix(Autocomplete): decrease padding when icon buttons are not rendered

fix #19047

Author: jedwards1211

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -32,10 +32,17 @@ export const styles = theme => ({
     margin: 2,
     maxWidth: 'calc(100% - 4px)',
   },
+  hasPopupIcon: {},
+  hasClearIcon: {},
   /* Styles applied to the Input element. */
   inputRoot: {
     flexWrap: 'wrap',
-    paddingRight: 62,
+    '$hasPopupIcon &, $hasClearIcon &': {
+      paddingRight: 31,
+    },
+    '$hasPopupIcon$hasClearIcon &': {
+      paddingRight: 62,
+    },
     '& $input': {
       width: 0,
       minWidth: 30,
@@ -59,7 +66,12 @@ export const styles = theme => ({
     },
     '&[class*="MuiOutlinedInput-root"]': {
       padding: 9,
-      paddingRight: 62,
+      '$hasPopupIcon &, $hasClearIcon &': {
+        paddingRight: 31,
+      },
+      '$hasPopupIcon$hasClearIcon &': {
+        paddingRight: 62,
+      },
       '& $input': {
         padding: '9.5px 4px',
       },
@@ -72,7 +84,12 @@ export const styles = theme => ({
     },
     '&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
       padding: 6,
-      paddingRight: 62,
+      '$hasPopupIcon &, $hasClearIcon &': {
+        paddingRight: 31,
+      },
+      '$hasPopupIcon$hasClearIcon &': {
+        paddingRight: 62,
+      },
       '& $input': {
         padding: '4.5px 4px',
       },
@@ -345,6 +362,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     );
   };
 
+  const hasClearIcon = !disableClearable && !disabled;
+  const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
+
   return (
     <React.Fragment>
       <div
@@ -353,6 +373,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
           classes.root,
           {
             [classes.focused]: focused,
+            [classes.hasClearIcon]: hasClearIcon,
+            [classes.hasPopupIcon]: hasPopupIcon,
           },
           className,
         )}
@@ -369,7 +391,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
             startAdornment,
             endAdornment: (
               <div className={classes.endAdornment}>
-                {disableClearable || disabled ? null : (
+                {hasClearIcon ? (
                   <IconButton
                     {...getClearProps()}
                     aria-label={clearText}
@@ -380,9 +402,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
                   >
                     {closeIcon}
                   </IconButton>
-                )}
+                ) : null}
 
-                {(!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false ? (
+                {hasPopupIcon ? (
                   <IconButton
                     {...getPopupIndicatorProps()}
                     disabled={disabled}

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -5,6 +5,7 @@ import describeConformance from '@material-ui/core/test-utils/describeConformanc
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { spy } from 'sinon';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
+import { createRender } from '@material-ui/core/test-utils/createRender';
 import Autocomplete from './Autocomplete';
 import TextField from '@material-ui/core/TextField';
 
@@ -39,6 +40,24 @@ describe('<Autocomplete />', () => {
       document.activeElement.blur();
       expect(input.value).to.equal('');
     });
+
+    it('should apply the hasClearIcon class', () => {
+      const { container } = render(
+        <Autocomplete renderInput={params => <TextField {...params} />} />,
+      );
+      expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
+        classes.hasClearIcon,
+      );
+    });
+
+    it('should apply the hasPopupIcon class', () => {
+      const { container } = render(
+        <Autocomplete renderInput={params => <TextField {...params} />} />,
+      );
+      expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
+        classes.hasPopupIcon,
+      );
+    });
   });
 
   describe('multiple', () => {
@@ -547,6 +566,71 @@ describe('<Autocomplete />', () => {
         );
         expect(queryByTitle('Clear')).to.be.null;
       });
+
+      it('should not apply the hasClearIcon class', () => {
+        const { container } = render(
+          <Autocomplete
+            disabled
+            options={['one', 'two', 'three']}
+            renderInput={params => <TextField {...params} />}
+          />,
+        );
+        expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class(
+          classes.hasClearIcon,
+        );
+      });
+
+      it('should still apply the hasPopupIcon class', () => {
+        const { container } = render(
+          <Autocomplete
+            disabled
+            options={['one', 'two', 'three']}
+            renderInput={params => <TextField {...params} />}
+          />,
+        );
+        expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
+          classes.hasPopupIcon,
+        );
+      });
+    });
+
+    describe('prop: disableClearable', () => {
+      it('should not render the clear button', () => {
+        const { queryByTitle } = render(
+          <Autocomplete
+            disableClearable
+            options={['one', 'two', 'three']}
+            renderInput={params => <TextField {...params} />}
+          />,
+        );
+        expect(queryByTitle('Clear')).to.be.null;
+      });
+
+      it('should still apply the hasPopupIcon class', () => {
+        const { container } = render(
+          <Autocomplete
+            disableClearable
+            options={['one', 'two', 'three']}
+            renderInput={params => <TextField {...params} />}
+          />,
+        );
+        expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
+          classes.hasPopupIcon,
+        );
+      });
+
+      it('should not apply the hasClearIcon class', () => {
+        const { container } = render(
+          <Autocomplete
+            disableClearable
+            options={['one', 'two', 'three']}
+            renderInput={params => <TextField {...params} />}
+          />,
+        );
+        expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class(
+          classes.hasClearIcon,
+        );
+      });
     });
   });
 
@@ -835,6 +919,21 @@ describe('<Autocomplete />', () => {
       fireEvent.keyDown(document.activeElement, { key: 'Enter' });
       expect(container.querySelectorAll('[class*="MuiChip-root"]')).to.have.length(3);
     });
+
+    it('should not apply hasPopupIcon class', () => {
+      const handleChange = spy();
+      const options = [{ name: 'foo' }];
+      const { container } = render(
+        <Autocomplete
+          freeSolo
+          onChange={handleChange}
+          options={options}
+          getOptionLabel={option => option.name}
+          renderInput={params => <TextField {...params} autoFocus />}
+        />,
+      );
+      expect(container).not.to.have.class(classes.hasPopupIcon);
+    });
   });
 
   describe('prop: onInputChange', () => {