Skip to content

Commit b8a416c

Browse files
jedwards1211jedwards1211
committed
fix(Autocomplete): decrease padding when icon buttons are not rendered
fix #19047
1 parent c8d9df0 commit b8a416c

File tree

2 files changed

+126
-6
lines changed

2 files changed

+126
-6
lines changed

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

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,17 @@ export const styles = theme => ({
3232
margin: 2,
3333
maxWidth: 'calc(100% - 4px)',
3434
},
35+
hasPopupIcon: {},
36+
hasClearIcon: {},
3537
/* Styles applied to the Input element. */
3638
inputRoot: {
3739
flexWrap: 'wrap',
38-
paddingRight: 62,
40+
'$hasPopupIcon &, $hasClearIcon &': {
41+
paddingRight: 31,
42+
},
43+
'$hasPopupIcon$hasClearIcon &': {
44+
paddingRight: 62,
45+
},
3946
'& $input': {
4047
width: 0,
4148
minWidth: 30,
@@ -59,7 +66,12 @@ export const styles = theme => ({
5966
},
6067
'&[class*="MuiOutlinedInput-root"]': {
6168
padding: 9,
62-
paddingRight: 62,
69+
'$hasPopupIcon &, $hasClearIcon &': {
70+
paddingRight: 31,
71+
},
72+
'$hasPopupIcon$hasClearIcon &': {
73+
paddingRight: 62,
74+
},
6375
'& $input': {
6476
padding: '9.5px 4px',
6577
},
@@ -72,7 +84,12 @@ export const styles = theme => ({
7284
},
7385
'&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
7486
padding: 6,
75-
paddingRight: 62,
87+
'$hasPopupIcon &, $hasClearIcon &': {
88+
paddingRight: 31,
89+
},
90+
'$hasPopupIcon$hasClearIcon &': {
91+
paddingRight: 62,
92+
},
7693
'& $input': {
7794
padding: '4.5px 4px',
7895
},
@@ -345,6 +362,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
345362
);
346363
};
347364

365+
const hasClearIcon = !disableClearable && !disabled;
366+
const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
367+
348368
return (
349369
<React.Fragment>
350370
<div
@@ -353,6 +373,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
353373
classes.root,
354374
{
355375
[classes.focused]: focused,
376+
[classes.hasClearIcon]: hasClearIcon,
377+
[classes.hasPopupIcon]: hasPopupIcon,
356378
},
357379
className,
358380
)}
@@ -369,7 +391,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
369391
startAdornment,
370392
endAdornment: (
371393
<div className={classes.endAdornment}>
372-
{disableClearable || disabled ? null : (
394+
{hasClearIcon ? (
373395
<IconButton
374396
{...getClearProps()}
375397
aria-label={clearText}
@@ -380,9 +402,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
380402
>
381403
{closeIcon}
382404
</IconButton>
383-
)}
405+
) : null}
384406

385-
{(!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false ? (
407+
{hasPopupIcon ? (
386408
<IconButton
387409
{...getPopupIndicatorProps()}
388410
disabled={disabled}

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,24 @@ describe('<Autocomplete />', () => {
3939
document.activeElement.blur();
4040
expect(input.value).to.equal('');
4141
});
42+
43+
it('should apply the hasClearIcon class', () => {
44+
const { container } = render(
45+
<Autocomplete renderInput={params => <TextField {...params} />} />,
46+
);
47+
expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
48+
classes.hasClearIcon,
49+
);
50+
});
51+
52+
it('should apply the hasPopupIcon class', () => {
53+
const { container } = render(
54+
<Autocomplete renderInput={params => <TextField {...params} />} />,
55+
);
56+
expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
57+
classes.hasPopupIcon,
58+
);
59+
});
4260
});
4361

4462
describe('multiple', () => {
@@ -547,6 +565,71 @@ describe('<Autocomplete />', () => {
547565
);
548566
expect(queryByTitle('Clear')).to.be.null;
549567
});
568+
569+
it('should not apply the hasClearIcon class', () => {
570+
const { container } = render(
571+
<Autocomplete
572+
disabled
573+
options={['one', 'two', 'three']}
574+
renderInput={params => <TextField {...params} />}
575+
/>,
576+
);
577+
expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class(
578+
classes.hasClearIcon,
579+
);
580+
});
581+
582+
it('should still apply the hasPopupIcon class', () => {
583+
const { container } = render(
584+
<Autocomplete
585+
disabled
586+
options={['one', 'two', 'three']}
587+
renderInput={params => <TextField {...params} />}
588+
/>,
589+
);
590+
expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
591+
classes.hasPopupIcon,
592+
);
593+
});
594+
});
595+
596+
describe('prop: disableClearable', () => {
597+
it('should not render the clear button', () => {
598+
const { queryByTitle } = render(
599+
<Autocomplete
600+
disableClearable
601+
options={['one', 'two', 'three']}
602+
renderInput={params => <TextField {...params} />}
603+
/>,
604+
);
605+
expect(queryByTitle('Clear')).to.be.null;
606+
});
607+
608+
it('should still apply the hasPopupIcon class', () => {
609+
const { container } = render(
610+
<Autocomplete
611+
disableClearable
612+
options={['one', 'two', 'three']}
613+
renderInput={params => <TextField {...params} />}
614+
/>,
615+
);
616+
expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
617+
classes.hasPopupIcon,
618+
);
619+
});
620+
621+
it('should not apply the hasClearIcon class', () => {
622+
const { container } = render(
623+
<Autocomplete
624+
disableClearable
625+
options={['one', 'two', 'three']}
626+
renderInput={params => <TextField {...params} />}
627+
/>,
628+
);
629+
expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class(
630+
classes.hasClearIcon,
631+
);
632+
});
550633
});
551634
});
552635

@@ -835,6 +918,21 @@ describe('<Autocomplete />', () => {
835918
fireEvent.keyDown(document.activeElement, { key: 'Enter' });
836919
expect(container.querySelectorAll('[class*="MuiChip-root"]')).to.have.length(3);
837920
});
921+
922+
it('should not apply hasPopupIcon class', () => {
923+
const handleChange = spy();
924+
const options = [{ name: 'foo' }];
925+
const { container } = render(
926+
<Autocomplete
927+
freeSolo
928+
onChange={handleChange}
929+
options={options}
930+
getOptionLabel={option => option.name}
931+
renderInput={params => <TextField {...params} autoFocus />}
932+
/>,
933+
);
934+
expect(container).not.to.have.class(classes.hasPopupIcon);
935+
});
838936
});
839937

840938
describe('prop: onInputChange', () => {

0 commit comments

Comments
 (0)