When setting material ui <Autocomplete /> with variant='filled' The endInputAdornments does not center to the AutoComplete.
Codesandbox with both variants for reference here
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
sx={{ width: 300, mt: 2 }}
renderInput={(params) => (
<TextField
{...params}
label="Movie"
variant="filled" //With filled it does not center anymore
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{params.InputProps.endAdornment}
<IconButton
color="primary"
aria-label="upload picture"
component="span"
>
<PhotoCamera />
</IconButton>
</React.Fragment>
)
}}
/>
I found a github issue where they fixed it for the inputProps internally but I cant seem to find a way to do the same with my own adornment elements.
The only prop that seems relevant is popupIcon but i still want that default feature. I just want to be able to add more IconButtons to the endInputAdornments
You can style the container for the icon by using a <div> instead of <React.Fragment>:
endAdornment: (
<div style={{ marginTop: "-19px" }}>
{params.InputProps.endAdornment}
<IconButton
color="primary"
aria-label="upload picture"
component="div"
>
<PhotoCamera />
</IconButton>
</div>
)
Here's the sandbox link
Why -19px? Because with variant="filled" the container for the text and icon is shifted down by 19px:
The popup icon of Autocomplete is vertically centered because of this styles. You can add your own styles to center the icon next to it by modifying the styles from the source a bit:
<Autocomplete
options={top100Films}
renderInput={(params) => (
<TextField
{...params}
label="Movie"
variant="filled"
InputProps={{
...params.InputProps,
sx: {
// this is necessary if you don't want to input value to be
// placed under the icon at the end
'&&&': { pr: '70px' },
},
endAdornment: (
<React.Fragment>
{params.InputProps.endAdornment}
<IconButton
color="primary"
sx={{
position: 'absolute',
p: 0,
right: 40,
top: 'calc(50% - 12px)', // Center vertically
}}
>
<PhotoCamera />
</IconButton>
</React.Fragment>
),
}}
/>
)}
/>
Related
I try to use the MUI in my project, and all the input fields I use don't behave correctly.
it supposed to look like this
but when I use it it will look like this
import Box from '#mui/material/Box'
import TextField from '#mui/material/TextField'
import Autocomplete from '#mui/material/Autocomplete'
<Autocomplete
className="mt-3"
size="small"
id="country-select-demo"
options={arr}
autoHighlight
getOptionLabel={(option) => option.label}
renderOption={(props, option) => (
<Box
component="li"
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
{...props}
>
{option.label}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose.."
inputProps={{
...params.inputProps,
}}
/>
)}
I just found out that uninstalling the react-bootstrap fix this problem.
In material UI v5 supposedly one can create almost anything with the sx prop, on the list is grid unfortunately I am unable to create what should be a simple grid. To illustrate here is what my grid would look like.
My unsuccessful attempts at using the Box component and sx prop look like this
What am I missing here, how can recreate what I have with the Grid component with the Box/sx combo?
Is it that you want ? Live example sandbox ?
<Box sx={{ placeContent: "center", display: "grid" }}>
<Box sx={{ gridRow: "1", gridColumn: "div 1" }}>
<TextField
name="name"
label="Name"
variant="outlined"
type="text"
margin="dense"
/>
</Box>
<Box sx={{ gridRow: "2", gridColumn: "div 1" }}>
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
</Box>
</Box>
I have all my components contained in a <Box> tag and would like to separate the submit button from the 3 text fields. I tried using a <br /> tag and that did not work.
Here is the website
And here is the code I have:
<Box
component="form"
noValidate
autoComplete="off"
display="flex"
alignItems="center"
justifyContent="center">
<TextField
label="Height (Feet)"
id="outlined-start-adornment"
type='number'
sx={{ marginX: 2 }}
InputProps={{
startAdornment: <InputAdornment position="start">ft:</InputAdornment>,
}}
/>
<TextField
label="Height (Feet)"
id="outlined-start-adornment"
type='number'
sx={{ marginX: 2 }}
InputProps={{
startAdornment: <InputAdornment position="start">in:</InputAdornment>,
}}
/>
<TextField
label="Weight"
id="outlined-start-adornment"
type='number'
sx={{ marginX: 2 }}
InputProps={{
startAdornment: <InputAdornment position="start">lbs:</InputAdornment>,
}}
/>
<Button variant="contained" type='submit'>Submit</Button>
</Box>
You could simply move your Button outside of Box.
<Box>
// Your inputs...
</Box>
<Button />
You might need to wrap everything inside a React fragment <> // Your code... </>.
I am using an MUI Autocomplete and have added an endAdornment loader to the Textfield while the options are being fetched (from an external source), however this is overriding MUI's clearIcon (presumably because it is also an endAdornment). How do ensure that the default clearIcon remains? Here is my code -
<Autocomplete
style={{ margin: 'auto' }}
options={itemOptions}
getOptionLabel={(option: Item) => option? option.name:''}
value={selectedItem}
inputValue={filterInput}
onInputChange={(e, v) => handleInputChange(v)}
onChange={(e, val) => {
if (val) {
handleItemSelect(val)
}
}}
renderInput={(params) => (
<TextField
{...params}
label="Items"
variant="outlined"
style={{ width: '300px' }}
InputProps={{
...params.InputProps,
endAdornment: (
<>
{loading ? <CircularProgress color="inherit" size={25} /> : null}
</>
),
}}
type="text"
/>
)}
/>
I figured it out, just need to add:
{params.InputProps.endAdornment}
to my endAdornment like so:
endAdornment: (
<>
{loading ? <CircularProgress color="inherit" size={25} /> : null}
{params.InputProps.endAdornment}
</>
),
I'm using react and I have a checkbox created with Autocomplete where I select items. It
is the same as that provided by material:
The problem is that the function "OnChange" runs only if I select the square.
I would like it to work also by selecting the row. How can I do it? Here's my code:
<AutoComplete
multiple
id="checkboxes-tags-demo"
options={props.roles}
// disableCloseOnSelect
// getOptionLabel={(options) => `${options}`}
renderOption={(options, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 20 }}
value={options}
checked={selected}
onChange={updateNewRoles}
/>
{options}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label=""
placeholder="Available Roles"
/>
)}
/>
<button type="submit" onClick={onSubmitChecked}>
Save
</button>
This is a photo of the example provided by material. The functions are performed only by clicking the icon and not the line: