We Keep Coding

Add a text field in MUI Autocomplete options dropdown

I want to add an editable text field in dropdown options of MUI Autocomplete.
I was able to add MUI text field by adding it in renderOption prop of Autocomplete.
Problem
I am not able to edit the text fields since the autocomplete selection overrides it.
<Autocomplete
open={open}
multiple
value={!!value ? [value] : []}
classes={{ popupIndicatorOpen: classes.popupOpen }}
closeIcon={null}
popupIcon={<KeyboardArrowDownIcon style={{ opacity: 0.6 }}/>}
forcePopupIcon
style={{ width: 300 }}
options={options} //array
getOptionLabel={opt => isInstanceOfIRange(opt) ? Concatenate([opt.min.value, opt.max.value], ' - ') : opt.value.toString() || ''}
renderTags={(opts, getTagProps) =>
opts.map((opt, index) => (
<CustomTag key={index.toString()} opt={opt} {...getTagProps({ index })} classes={classes} />)
)}
onChange={handleChange}/
renderInput={params => (
<TextField
{...params}
label={props.label}
variant='filled'
onFocus={() => setOpen(true)}
onInput={onInputChange}
/>
)}
renderOption={(option, { selected }) => (
<CustomOption option={option} selected={selected} />
)}
PopperComponent={PopperComponent}
PaperComponent={PaperComponent}
/>
Custom Options rendering text box
const CustomOption = ({ selected, option }) => (
<div style={{ display: 'flex', flexDirection: 'row' }}>
<Checkbox
size="small"
color="primary"
checked={selected}
style={{ marginRight: 8 }}
icon={<RadioButtonUncheckedIcon />}
checkedIcon={<RadioButtonCheckedIcon />}
/>
{
isInstanceOfIRange(option) ? <RangeRender option={option} /> : <SingleRender
option={option} />
}
</div>
);
The Two text boxes are rendered using this component
const RangeRender = ({ option: { min, max } }) => {
const { labelPostfix, labelPrefix } = useContext(DropDownContext);
const inputProps = labelPrefix ? {
startAdornment: <InputAdornment position="start">{labelPrefix}</InputAdornment>,
} : labelPostfix ? { endAdornment: <InputAdornment position="end">{labelPostfix}
</InputAdornment>,} : {};
return (
<Box style={{ display: 'flex', gap: 12 }}>
<NummberField
type="number"
variant="outlined"
value={min.value}
InputProps={inputProps}
/>
<NummberField
type="number"
variant="outlined"
value={max.value}
InputProps={inputProps}
/>
</Box>);
};

add Chip inside TextField with multiline props doesn't work as expected

I would like to insert my tags in TextField with multiline.
something like this
But I have this behavior
tags don't return to new line
tags are in the middle of the TextField
the following is the code i'm using.
<TextField
value={inputValue}
margin="dense"
rows={6}
multiline
fullWidth
placeholder="add tags"
sx={{mt:2}}
label="tags"
InputProps={{
startAdornment: selectedItem.map(item => (
<Chip
key={item}
tabIndex={-1}
label={item}
onDelete={handleDelete(item)}
style={{height:"100%"}}
/>
)),
onChange: event => {
handleInputChange(event);
},
onKeyDown: handleKeyDown
}}
/>

well, here's a solution; I had to give a style to InputProps
<TextField
value={inputValue}
margin="dense"
fullWidth
placeholder="add tags"
sx={{mt:2, pb:4}}
label="tags"
InputProps={{
//added style
style: {display: 'flex', flexWrap: 'wrap', gap: "10px"},
startAdornment: selectedItem.map(item => (
<Chip
key={item}
tabIndex={-1}
label={item}
sx={{mt:2}}
onDelete={handleDelete(item)}
style={{height:"100%"}}
/>
)),
onChange: event => {
handleInputChange(event);
},
onKeyDown: handleKeyDown
}}
/>

Applying InputAdornment to MUI AutoComplete removes the options list

I built an AutoComplete component that looks like this:
<Autocomplete
freeSolo
size="small"
id="filter-locks-autocomplete"
options={json_list ? json_list : []}
groupBy={(option) => option.lock.building}
getOptionLabel={(option) => (option.name)}
inputValue={inputValue}
onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label={'lock'}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search sx={{ color: "black", fontSize: 20, marginLeft: "2px" }} />
{params.InputProps.startAdornment}
</InputAdornment>
),
}}
/>
)}
/>;
However, the list of options do no longer appear when clicking inside the box.
If I remove the InputProps from <TextField /> like so:
<Autocomplete
freeSolo
size="small"
id="filter-locks-autocomplete"
options={json_list ? json_list : []}
groupBy={(option) => option.lock.building}
getOptionLabel={(option) => option.name}
inputValue={inputValue}
onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
ListboxProps={{ sx: { zIndex: 1500 } }}
renderInput={(params) => (
<TextField {...params} variant="standard" label={"lock name"} />
)}
/>;
the list of options show as expected.
Is there a way I can add an inputAdornment (just a search icon) to AutoComplete component without removing the Options list?

Here I found the solution, you can try following code
<Autocomplete
id="tags-standard"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[13]]}
renderInput={params => {
return (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
fullWidth
InputProps={{
...params.InputProps,
startAdornment: (
<>
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
{params.InputProps.startAdornment}
</>
)
}}
/>
);
}}
/>
It is working fine. you can also check here in CodeSandbox
for more details check this Github material-ui issue

Unable to disable keyboard date change in MUI DatePicker API

Link to CodeSandBox : codesandbox.io/s/dl5jft?file=/demo.tsx
I don't want users to Edit dates via keyboard, I want them to select dates from date picker modal, how to disable this?,
i used the ReadOnly prop but it is disabling date selection itself, please help when i did readOnly, it is disabling the whole input, which made me unable to open the modal to select the date
<GlobalStyle />
<CalendarContainer>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
value={calendarVal}
onChange={(newValue) => {
handleChange(newValue);
}}
disabled={disabled}
inputFormat="dd-MM-yyyy"
renderInput={(params) => (
<TextField
// eslint-disable-next-line react/jsx-props-no-spreading
{...params}
name={name}
error={error}
disabled={disabled}
/>
)}
/>
</LocalizationProvider>
</CalendarContainer>

For preventing user keyboard actions, you can set the functionality of onKeyDown event to preventDefault and assign it to TextField:
const onKeyDown = (e) => {
e.preventDefault();
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={3}>
<DesktopDatePicker
label="Date desktop"
inputFormat="MM/dd/yyyy"
value={value}
onChange={handleChange}
renderInput={(params) => (
<TextField onKeyDown={onKeyDown} {...params} />
)}
/>
)

For me, in latest #mui 5, the other solutions weren't working properly.
The only solution that worked for me is:
<DatePicker
dateAdapter={AdapterDateFns}
renderInput={(params) => (
<TextField
{...params}
inputProps={{...params.inputProps, readOnly: true}}
/>
)}
/>

I have done 2 things to solve this:
1- set render input TextField to readOnly => no typing
2- add sx of TextField caretColor: 'transparent' => hide the caret
<DatePicker
renderInput={params => (
<TextField
{...params}
InputProps={{
readOnly: true,
sx={{
"& .MuiInputBase-input": {
caretColor: 'transparent'
}
}}
/>
)}
/>

Is there a way to change the close icons on the autocomplete component of material ui?

I would like to change the icon, but would like to keep the function when clicking.
is there a good solution for this?
I want to change this Icon
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={top100Films}
disableCloseOnSelect
getOptionLabel={(option) => option.title}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.title}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
)}
/>
Can anybody help me?

You can pass a function to customize the rendering of the Chip component used by the Autocomplete
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip variant="outlined" label={option} {...getTagProps({ index })} />
))
}
renderInput={(params) => (
<TextField {...params} variant="filled" label="freeSolo" placeholder="Favorites" />
)}
/>
And the Chip component can be further customized with the deleteIcon prop
Edit: For more info, see the API of the Autocomplete and the API of the Chip

You can change it using the ChipProps of Autocomplete, as that icon is a part of a Chip component, and can be customized through deleteIcon property