We Keep Coding

How to open Reactjs MUI DatePicker popup when click inside it to edit date without using openPickerButton?

Currently, DatePicker shows a calendar icon to open the calendar popup. I can remove the icon with disableOpenPicker prop but I want to open the popup when the user clicks the Datepicker input field and it should work exactly the same as with the opener icon.
enter image description here

disableOpenPicker prop will not just remove the icon, but also disable the picker. You will still have the input field with date validation. You can replace or hide the icon using openPickerIcon to set an icon of your choice.
Alternatively, you can use MobileDatePicker if you don't want to configure anything. MobileDatePicker will give you an input field which opens a picker on click.
See Mobile Picker here - https://mui.com/x/react-date-pickers/getting-started/
API Reference - https://mui.com/x/api/date-pickers/date-picker/

It's my solution to custom input Date Textbox, add event onClick handleOpenPopUp and add open props to DatePicker. You can see detail here
<DatePicker
...
open={open}
renderInput={...}
/>
renderInput={({ inputRef, inputProps, InputProps }) => {
return (
<Box
className="form-calendar"
sx={{ display: "flex", alignItems: "center" }}
>
<input
className="form-control"
ref={inputRef}
{...inputProps}
value={moment(acceptedDate).format("L")}
readOnly
onClick={handleOpenPopUp}
/>
{InputProps?.endAdornment}
</Box>
);
}}

Reduce the time it takes to make a checkbox clicked in the Checkbox component (Material UI)

It takes about 1 second for the checkbox ( Material UI component) to be enabled when I click on it. Is it possible to reduce the time?
<Checkbox
color="primary"
checked={isItemSelected}
inputProps={{
"aria-labelledby": labelId,
}}
/>

How to style list option in Autocomplete material ui with use of renderOption?

I am trying hard to customize option elements in autocomplete list. I want to do this by use of renderOptions prop, where i can create DOM elements. Then, i can pretty easly add styles with sx or styled components.
But something is wrong. When i try to render options list elements wrapped in divs, the names of the movies are hidden (?)
They are rendered, because i can still choose option, and after that it is showned as selected, but the input list is still broken, and CSS styles are not applied.
What I am missing ? Autocomplete and its styling is new for me.
The code:
<Autocomplete
freeSolo
id="free-solo-2-demo"
disableClearable
options={top100Films.map((option) => option.title)}
renderOption={(props, option) => {
return (
<li {...props}>
<div
sx={{
backgroundColor: "red",
color: "orange"
}}
>
{option.title}
</div>
</li>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
InputProps={{
...params.InputProps,
type: "search"
}}
/>
)}
/>
</Stack>
);
}
Heres the demo : https://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js

TL;DR Just change option.title to option in renderOption prop. And use Box instead of div to apply styles.
I couldn't find it stated in documentation explicitly but apparently each of the elements passed to options is then passed to renderOption as option argument.
So since you already pass array of option.title strings to options you will need to refer to them just as option in renderOption prop.
The sx prop is used by MUI components. So please change div to MUI Box component inside renderOption. The Box was created specifically for such cases.

How to use :valid css selector in Material-UI Autocomplete?

I'm pretty new to react, and am having some difficulty using the :valid css selector in MUI's autocomplete. (MUI v5)
I’ve been having some difficulty with changing the border colour of a MUI autocomplete when it is not empty (essentially set border colour when :valid is true). By setting the required field, this would mean that a selection in the dropdown would trigger the border colour change as it is no longer empty, but it is not changing.
Based on the solution below:
Setting text color, outline, and padding on Material-ui Autocomplete component
It uses hover and focussed selectors, but not valid.
I’ve tried adding a &:valid css selector in the styles, and setting a required value in the textfield component within autocomplete.
However, it does not seem to be working. Hope someone can help explain what I am doing wrongly. Thank you.
const StyledAutocomplete = styled(Autocomplete)({
"& .MuiAutocomplete-inputRoot": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "grey"
},
"&:valid .MuiOutlinedInput-notchedOutline": {
borderColor: "blue"
}
}
});
class JobTypeField extends React.Component {
render() {
return (
<StyledAutocomplete
options={jobType}
onChange={this.props.handleChange}
renderInput={(params) => (
<TextField
{...params} // Added in required field here
required
InputLabelProps={{
required: false
}}
label="Job Type"
/>
)}
/>
);
}
}

React: Why does autocomplete unintentionally reset the selected value?

Good evening, i'm trying to solve a problem where the autocomplete value is reset. This happens when i'm changing the state of the UI (example in sandbox). I want the value to still be there, if a user decided to go back and change it. I don't why the autcomplete react that way, but I haven't found a solution.
Any suggestions how to solve this?
Link: https://codesandbox.io/s/sharp-diffie-6ikc6?file=/index.js

You should use controlled version of the autocomplete. The issue is caused by onInputChange callback, which fired not just for selecting option. In your case React removes the autocomplete from DOM (because of your switch) and it fires onInputChange with empty value, so your state changes to empty string.
To avoid this you should use value and onChange instead. onChange fires only if you change the option.
const [value, setValue] = useState(null);
<Autocomplete
value={value}
disablePortal
id="combo-box-demo"
options={movies.sort(
(a, b) => -b.distributor.localeCompare(a.distributor)
)}
onChange={onInputChange}
groupBy={(option) => option.distributor}
getOptionLabel={(option) => option.movie}
sx={{ width: "100%", paddingRight: 2 }}
renderInput={(params) => (
<TextField
style={{ backgroundColor: "#fff", marginLeft: 25 }}
{...params}
label="Movie"
/>
)}
selectOnFocus={false}
/>
Check it out: https://codesandbox.io/s/peaceful-shamir-r2dwi?file=/index.js