Skip to content

Commit 0fd0242

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

File tree

3 files changed

+130
-6
lines changed

3 files changed

+130
-6
lines changed

‎docs/pages/api/autocomplete.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ Any other props supplied will be provided to the root element (native element).
9191
| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element if focused.
9292
| <span class="prop-name">tag</span> | <span class="prop-name">.MuiAutocomplete-tag</span> | Styles applied to the tag elements, e.g. the chips.
9393
| <span class="prop-name">tagSizeSmall</span> | <span class="prop-name">.MuiAutocomplete-tagSizeSmall</span> | Styles applied to the tag elements, e.g. the chips if `size="small"`.
94+
| <span class="prop-name">hasPopupIcon</span> | <span class="prop-name">.MuiAutocomplete-hasPopupIcon</span> | Styles applied when the popup icon is rendered.
95+
| <span class="prop-name">hasClearIcon</span> | <span class="prop-name">.MuiAutocomplete-hasClearIcon</span> | Styles applied when the clear icon is rendered.
9496
| <span class="prop-name">inputRoot</span> | <span class="prop-name">.MuiAutocomplete-inputRoot</span> | Styles applied to the Input element.
9597
| <span class="prop-name">input</span> | <span class="prop-name">.MuiAutocomplete-input</span> | Styles applied to the input element.
9698
| <span class="prop-name">inputFocused</span> | <span class="prop-name">.MuiAutocomplete-inputFocused</span> | Styles applied to the input element if tag focused.

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

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,19 @@ export const styles = theme => ({
3232
margin: 2,
3333
maxWidth: 'calc(100% - 4px)',
3434
},
35+
/* Styles applied when the popup icon is rendered. */
36+
hasPopupIcon: {},
37+
/* Styles applied when the clear icon is rendered. */
38+
hasClearIcon: {},
3539
/* Styles applied to the Input element. */
3640
inputRoot: {
3741
flexWrap: 'wrap',
38-
paddingRight: 62,
42+
'$hasPopupIcon &, $hasClearIcon &': {
43+
paddingRight: 31,
44+
},
45+
'$hasPopupIcon$hasClearIcon &': {
46+
paddingRight: 62,
47+
},
3948
'& $input': {
4049
width: 0,
4150
minWidth: 30,
@@ -59,7 +68,12 @@ export const styles = theme => ({
5968
},
6069
'&[class*="MuiOutlinedInput-root"]': {
6170
padding: 9,
62-
paddingRight: 62,
71+
'$hasPopupIcon &, $hasClearIcon &': {
72+
paddingRight: 31,
73+
},
74+
'$hasPopupIcon$hasClearIcon &': {
75+
paddingRight: 62,
76+
},
6377
'& $input': {
6478
padding: '9.5px 4px',
6579
},
@@ -72,7 +86,12 @@ export const styles = theme => ({
7286
},
7387
'&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
7488
padding: 6,
75-
paddingRight: 62,
89+
'$hasPopupIcon &, $hasClearIcon &': {
90+
paddingRight: 31,
91+
},
92+
'$hasPopupIcon$hasClearIcon &': {
93+
paddingRight: 62,
94+
},
7695
'& $input': {
7796
padding: '4.5px 4px',
7897
},
@@ -345,6 +364,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
345364
);
346365
};
347366

367+
const hasClearIcon = !disableClearable && !disabled;
368+
const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
369+
348370
return (
349371
<React.Fragment>
350372
<div
@@ -353,6 +375,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
353375
classes.root,
354376
{
355377
[classes.focused]: focused,
378+
[classes.hasClearIcon]: hasClearIcon,
379+
[classes.hasPopupIcon]: hasPopupIcon,
356380
},
357381
className,
358382
)}
@@ -369,7 +393,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
369393
startAdornment,
370394
endAdornment: (
371395
<div className={classes.endAdornment}>
372-
{disableClearable || disabled ? null : (
396+
{hasClearIcon ? (
373397
<IconButton
374398
{...getClearProps()}
375399
aria-label={clearText}
@@ -380,9 +404,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
380404
>
381405
{closeIcon}
382406
</IconButton>
383-
)}
407+
) : null}
384408

385-
{(!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false ? (
409+
{hasPopupIcon ? (
386410
<IconButton
387411
{...getPopupIndicatorProps()}
388412
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)