diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 708accd968aff2..655dfb9c27b234 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -40,10 +40,10 @@ export const styles = theme => ({
inputRoot: {
flexWrap: 'wrap',
'$hasPopupIcon &, $hasClearIcon &': {
- paddingRight: 31,
+ paddingRight: 26 + 4,
},
'$hasPopupIcon$hasClearIcon &': {
- paddingRight: 62,
+ paddingRight: 52 + 4,
},
'& $input': {
width: 0,
@@ -69,10 +69,10 @@ export const styles = theme => ({
'&[class*="MuiOutlinedInput-root"]': {
padding: 9,
'$hasPopupIcon &, $hasClearIcon &': {
- paddingRight: 31,
+ paddingRight: 26 + 4 + 9,
},
'$hasPopupIcon$hasClearIcon &': {
- paddingRight: 62,
+ paddingRight: 52 + 4 + 9,
},
'& $input': {
padding: '9.5px 4px',
@@ -81,17 +81,11 @@ export const styles = theme => ({
paddingLeft: 6,
},
'& $endAdornment': {
- right: 7,
+ right: 9,
},
},
'&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
padding: 6,
- '$hasPopupIcon &, $hasClearIcon &': {
- paddingRight: 31,
- },
- '$hasPopupIcon$hasClearIcon &': {
- paddingRight: 62,
- },
'& $input': {
padding: '4.5px 4px',
},
@@ -99,11 +93,17 @@ export const styles = theme => ({
'&[class*="MuiFilledInput-root"]': {
paddingTop: 19,
paddingLeft: 8,
+ '$hasPopupIcon &, $hasClearIcon &': {
+ paddingRight: 26 + 4 + 9,
+ },
+ '$hasPopupIcon$hasClearIcon &': {
+ paddingRight: 52 + 4 + 9,
+ },
'& $input': {
padding: '9px 4px',
},
'& $endAdornment': {
- right: 7,
+ right: 9,
},
},
'&[class*="MuiFilledInput-root"][class*="MuiFilledInput-marginDense"]': {
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
index dbe663303801b1..f73305a3fa11e9 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -40,22 +40,12 @@ describe('', () => {
expect(input.value).to.equal('');
});
- it('should apply the hasClearIcon class', () => {
+ it('should apply the icon classes', () => {
const { container } = render(
} />,
);
- expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
- classes.hasClearIcon,
- );
- });
-
- it('should apply the hasPopupIcon class', () => {
- const { container } = render(
- } />,
- );
- expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
- classes.hasPopupIcon,
- );
+ expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasClearIcon);
+ expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
});
});
@@ -574,28 +564,14 @@ describe('', () => {
renderInput={params => }
/>,
);
- expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class(
- classes.hasClearIcon,
- );
- });
-
- it('should still apply the hasPopupIcon class', () => {
- const { container } = render(
- }
- />,
- );
- expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
- classes.hasPopupIcon,
- );
+ expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon);
+ expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
});
});
describe('prop: disableClearable', () => {
it('should not render the clear button', () => {
- const { queryByTitle } = render(
+ const { queryByTitle, container } = render(
', () => {
/>,
);
expect(queryByTitle('Clear')).to.be.null;
- });
-
- it('should still apply the hasPopupIcon class', () => {
- const { container } = render(
- }
- />,
- );
- expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
- classes.hasPopupIcon,
- );
- });
-
- it('should not apply the hasClearIcon class', () => {
- const { container } = render(
- }
- />,
- );
- expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class(
- classes.hasClearIcon,
- );
+ expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
+ expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon);
});
});
});
@@ -918,21 +870,6 @@ describe('', () => {
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(
- option.name}
- renderInput={params => }
- />,
- );
- expect(container).not.to.have.class(classes.hasPopupIcon);
- });
});
describe('prop: onInputChange', () => {