Unable to disable keyboard date change in MUI DatePicker API - javascript

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'
}
}}
/>
)}
/>

Related

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

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

Passing a text field value on a button click

Here is the code that contains the text field and the button. I want to call the "apiFetcher" function with the value of the text field. I commented out the onblur function in the text field. That worked perfectly fine. Any suggestions to fix this issue.
<Autocomplete
id="free-solo-2-demo"
disableClearable
options={Cities.map((option) => option.name)}
renderInput={(params) => (
<div
>
<TextField
id="standard-basic"
{...params}
label="city"
margin="normal"
InputProps={{ ...params.InputProps, type: 'search' }}
// onBlur={apiFtecher}
/>
</div>
)}
/>
</Grid>
<Grid className={classes.seIcon} item xs={1}>
<div onClick={apiFtecher}>
<IconButton>
<SearchIcon/>
</IconButton>
</div>
</Grid>
Here is the apiFetcher function
const apiFtecher = e => {
setcity(e.target.value);
console.log(city);
}
Here is what i did
const [town,settown]=useState("");
function APIsetter(){
return(
setcity(town)
)
}
And then bind the APIsetter to onclick function of the button.And it worked

Material UI <Autocomplete/> remove browser suggestion

I have problem with Material-ui Autocomplete:
import Autocomplete from "#material-ui/lab/Autocomplete";
I am using then in:
<Autocomplete
id="checkboxes-tags-demo"
autoComplete={false}
options={states}
disableCloseOnSelect
getOptionLabel={(option) => option.name}
onChange={onStateChange}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.name}
</React.Fragment>
)}
style={{ width: "100%" }}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="State"
placeholder="Enter state"
/>
)}
/>
Nothing important in this code but I face this issue:
I am getting the browser suggestion. How I can remove it ?
As mentioned in this SO question, you should add autoComplete="off" to your TextField.

Categories