Skip to content

[Select] Fix endAdornment overlapping the open indicator #48723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
siriwatknp wants to merge 8 commits into
base: master
Choose a base branch
from
+342 −49
Open

[Select] Fix endAdornment overlapping the open indicator #48723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ac95601
[Select] Fix endAdornment overlapping the open indicator
siriwatknp Jun 24, 2026
a20c384
Merge branch 'master' into fix/select-endadornment-indicator
siriwatknp Jun 24, 2026
88d4853
Merge branch 'master' of github.com:mui/material-ui into fix/select-e…
siriwatknp Jun 25, 2026
cac237f
adjust variables
siriwatknp Jun 25, 2026
0a76bcc
[test] use plain icon and FormControl composition in SelectEndAdornme…
siriwatknp Jun 25, 2026
9a063bc
Merge branch 'master' of github.com:mui/material-ui into fix/select-e…
siriwatknp Jun 25, 2026
2daf8f2
add internal variables for meaning
siriwatknp Jun 25, 2026
1f62477
fix
siriwatknp Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 119 additions & 22 deletions docs/data/material/components/text-fields/InputAdornments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import InputAdornment from '@mui/material/InputAdornment';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import InfoOutlined from '@mui/icons-material/InfoOutlined';

export default function InputAdornments() {
const outlinedStartId = React.useId();
Expand All @@ -37,6 +39,19 @@ export default function InputAdornments() {
event.preventDefault();
};

// An endAdornment coexists with the Select's chevron without overlapping it.
const infoEndAdornment = (
<InputAdornment position="end">
<InfoOutlined />
</InputAdornment>
);

const infoStartAdornment = (
<InputAdornment position="start">
<InfoOutlined />
</InputAdornment>
);

return (
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<div>
Expand Down Expand Up @@ -86,14 +101,40 @@ export default function InputAdornments() {
label="Password"
/>
</FormControl>
<FormControl fullWidth sx={{ m: 1 }}>
<InputLabel htmlFor={`${outlinedAmountId}-input`}>Amount</InputLabel>
<OutlinedInput
id={`${outlinedAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
label="Amount"
/>
</FormControl>
<div>
<FormControl sx={{ m: 1, width: '25ch' }}>
<InputLabel htmlFor={`${outlinedAmountId}-input`}>Amount</InputLabel>
<OutlinedInput
id={`${outlinedAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
label="Amount"
/>
</FormControl>
<TextField
select
label="Select"
defaultValue={20}
sx={{ m: 1, width: '25ch' }}
slotProps={{ select: { endAdornment: infoEndAdornment } }}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
<TextField
select
label="Native"
defaultValue={20}
sx={{ m: 1, width: '25ch' }}
slotProps={{
select: { native: true, startAdornment: infoStartAdornment },
}}
>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</TextField>
</div>
</div>
<div>
<TextField
Expand Down Expand Up @@ -142,13 +183,41 @@ export default function InputAdornments() {
}
/>
</FormControl>
<FormControl fullWidth sx={{ m: 1 }} variant="filled">
<InputLabel htmlFor={`${filledAmountId}-input`}>Amount</InputLabel>
<FilledInput
id={`${filledAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>
</FormControl>
<div>
<FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
<InputLabel htmlFor={`${filledAmountId}-input`}>Amount</InputLabel>
<FilledInput
id={`${filledAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>
</FormControl>
<TextField
select
label="Select"
defaultValue={20}
variant="filled"
sx={{ m: 1, width: '25ch' }}
slotProps={{ select: { endAdornment: infoEndAdornment } }}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
<TextField
select
label="Native"
defaultValue={20}
variant="filled"
sx={{ m: 1, width: '25ch' }}
slotProps={{
select: { native: true, startAdornment: infoStartAdornment },
}}
>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</TextField>
</div>
</div>
<div>
<TextField
Expand Down Expand Up @@ -196,13 +265,41 @@ export default function InputAdornments() {
}
/>
</FormControl>
<FormControl fullWidth sx={{ m: 1 }} variant="standard">
<InputLabel htmlFor={`${standardAmountId}-input`}>Amount</InputLabel>
<Input
id={`${standardAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>
</FormControl>
<div>
<FormControl sx={{ m: 1, width: '25ch' }} variant="standard">
<InputLabel htmlFor={`${standardAmountId}-input`}>Amount</InputLabel>
<Input
id={`${standardAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>
</FormControl>
<TextField
select
label="Select"
defaultValue={20}
variant="standard"
sx={{ m: 1, width: '25ch' }}
slotProps={{ select: { endAdornment: infoEndAdornment } }}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
<TextField
select
label="Native"
defaultValue={20}
variant="standard"
sx={{ m: 1, width: '25ch' }}
slotProps={{
select: { native: true, startAdornment: infoStartAdornment },
}}
>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</TextField>
</div>
</div>
</Box>
);
Expand Down
140 changes: 118 additions & 22 deletions docs/data/material/components/text-fields/InputAdornments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import InputAdornment from '@mui/material/InputAdornment';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import InfoOutlined from '@mui/icons-material/InfoOutlined';

export default function InputAdornments() {
const outlinedStartId = React.useId();
Expand All @@ -37,6 +39,18 @@ export default function InputAdornments() {
event.preventDefault();
};

// An endAdornment coexists with the Select's chevron without overlapping it.
const infoEndAdornment = (
<InputAdornment position="end">
<InfoOutlined />
</InputAdornment>
);
const infoStartAdornment = (
<InputAdornment position="start">
<InfoOutlined />
</InputAdornment>
);

return (
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<div>
Expand Down Expand Up @@ -86,14 +100,40 @@ export default function InputAdornments() {
label="Password"
/>
</FormControl>
<FormControl fullWidth sx={{ m: 1 }}>
<InputLabel htmlFor={`${outlinedAmountId}-input`}>Amount</InputLabel>
<OutlinedInput
id={`${outlinedAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
label="Amount"
/>
</FormControl>
<div>
<FormControl sx={{ m: 1, width: '25ch' }}>
<InputLabel htmlFor={`${outlinedAmountId}-input`}>Amount</InputLabel>
<OutlinedInput
id={`${outlinedAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
label="Amount"
/>
</FormControl>
<TextField
select
label="Select"
defaultValue={20}
sx={{ m: 1, width: '25ch' }}
slotProps={{ select: { endAdornment: infoEndAdornment } }}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
<TextField
select
label="Native"
defaultValue={20}
sx={{ m: 1, width: '25ch' }}
slotProps={{
select: { native: true, startAdornment: infoStartAdornment },
}}
>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</TextField>
</div>
</div>
<div>
<TextField
Expand Down Expand Up @@ -142,13 +182,41 @@ export default function InputAdornments() {
}
/>
</FormControl>
<FormControl fullWidth sx={{ m: 1 }} variant="filled">
<InputLabel htmlFor={`${filledAmountId}-input`}>Amount</InputLabel>
<FilledInput
id={`${filledAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>
</FormControl>
<div>
<FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
<InputLabel htmlFor={`${filledAmountId}-input`}>Amount</InputLabel>
<FilledInput
id={`${filledAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>
</FormControl>
<TextField
select
label="Select"
defaultValue={20}
variant="filled"
sx={{ m: 1, width: '25ch' }}
slotProps={{ select: { endAdornment: infoEndAdornment } }}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
<TextField
select
label="Native"
defaultValue={20}
variant="filled"
sx={{ m: 1, width: '25ch' }}
slotProps={{
select: { native: true, startAdornment: infoStartAdornment },
}}
>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</TextField>
</div>
</div>
<div>
<TextField
Expand Down Expand Up @@ -196,13 +264,41 @@ export default function InputAdornments() {
}
/>
</FormControl>
<FormControl fullWidth sx={{ m: 1 }} variant="standard">
<InputLabel htmlFor={`${standardAmountId}-input`}>Amount</InputLabel>
<Input
id={`${standardAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>
</FormControl>
<div>
<FormControl sx={{ m: 1, width: '25ch' }} variant="standard">
<InputLabel htmlFor={`${standardAmountId}-input`}>Amount</InputLabel>
<Input
id={`${standardAmountId}-input`}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>
</FormControl>
<TextField
select
label="Select"
defaultValue={20}
variant="standard"
sx={{ m: 1, width: '25ch' }}
slotProps={{ select: { endAdornment: infoEndAdornment } }}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
<TextField
select
label="Native"
defaultValue={20}
variant="standard"
sx={{ m: 1, width: '25ch' }}
slotProps={{
select: { native: true, startAdornment: infoStartAdornment },
}}
>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</TextField>
</div>
</div>
</Box>
);
Expand Down
8 changes: 7 additions & 1 deletion packages/mui-material/src/FilledInput/FilledInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import memoTheme from '../utils/memoTheme';
import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
import { useDefaultProps } from '../DefaultPropsProvider';
import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses';
import selectClasses from '../Select/selectClasses';
import {
rootOverridesResolver as inputBaseRootOverridesResolver,
inputOverridesResolver as inputBaseInputOverridesResolver,
Expand Down Expand Up @@ -163,7 +164,12 @@ const FilledInputRoot = styled(InputBaseRoot, {
{
props: ({ ownerState }) => ownerState.endAdornment,
style: {
paddingRight: 12,
// use CSS variable to keep specificity
'--_trailingPad': '12px',
paddingRight: 'var(--_trailingPad)',
[`&.${selectClasses.root}`]: {
'--_trailingPad': '0px',
},
},
},
{
Expand Down
Loading
Loading