I hope you are doing well! I am facing a bit of a problem and I am unable to find a fix for it.
In my website I have 4 DesktopDatePickers (we are using @mui/x-date-picker) and we want to make the Date Picker appear when we click anywhere on the Textfield (not just the calendar icon). So we have the following code:
<Grid item xs={8} md={5} lg={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Creation Date From"
inputFormat="MM/dd/yyyy"
value={dateFrom}
onChange={(newValue) => {
setDateFrom(newValue);
setCreationDateFromOpen(false);
}}
clearable={true}
onClose={() => setCreationDateFromOpen(false)}
open={creationDateFromOpen}
renderInput={(params) => (
<TextField
{...params}
onClick={() => {
setCreationDateFromOpen((open) => !open);
}}
onKeyPress={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.code !== "Backspace") {
e.preventDefault();
}
}}
onChange={(e) => {
e.preventDefault();
}}
fullWidth
id="creationDateFrom"
size="small"
error={false}
/>
)}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={8} md={5} lg={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Creation Date To"
inputFormat="MM/dd/yyyy"
value={dateTo}
onChange={(newValue) => {
setDateTo(newValue);
setCreationdateToOpen(false);
}}
clearable={true}
open={creationDateToOpen}
onClose={() => setCreationdateToOpen(false)}
renderInput={(params) => (
<TextField
{...params}
onClick={() => {
setCreationdateToOpen((open) => !open);
}}
onKeyPress={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.code !== "Backspace") {
e.preventDefault();
}
}}
onChange={(e) => {
e.preventDefault();
}}
fullWidth
size="small"
error={false}
/>
)}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={8} md={5} lg={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Delivery Date From"
inputFormat="MM/dd/yyyy"
value={requestDateFrom}
onChange={(newValue) => {
setRequestDateFrom(newValue);
setModificationDateFromOpen(false);
}}
clearable={true}
open={modificationDateFromOpen}
onClose={() => setModificationDateFromOpen(false)}
renderInput={(params) => (
<TextField
{...params}
onKeyPress={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.code !== "Backspace") {
e.preventDefault();
}
}}
onChange={(e) => {
e.preventDefault();
}}
onClick={() => {
setModificationDateFromOpen((open) => !open);
}}
fullWidth
size="small"
error={false}
/>
)}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={8} md={5} lg={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Delivery Date To"
inputFormat="MM/dd/yyyy"
value={requestDateTo}
onChange={(newValue) => {
setRequestDateTo(newValue);
setModificationDateToOpen(false);
}}
clearable={true}
open={modificationDateToOpen}
onClose={() => setModificationDateToOpen(false)}
renderInput={(params) => (
<TextField
{...params}
onKeyPress={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.code !== "Backspace") {
e.preventDefault();
}
}}
onChange={(e) => {
e.preventDefault();
}}
onClick={() => {
setModificationDateToOpen((open) => !open);
}}
fullWidth
size="small"
error={false}
/>
)}
/>
</LocalizationProvider>
</Grid>
However, We are running through a problem. If a user clicks on one textfield it Focuses then loses focus but displays the Date Picker, but directly after it, they click anywhere and the Date Picker disappears (which is supposed to happen) but the field regains Focus so it looks like the field is awaiting input. So clicking on any other field while the Date Picker is open causes that field to Focus then lose focus and the Browser focuses the Date Field again.
I tried using onFocus={(e)=>e.preventDefault()} in the renderInput TextField but the field still got focused. Using ref.current.blur() gives an error that blur() does not exist.
How can I make the Field not Focus when closing the DatePicker?