CODEWITHSUNDEEP
reactjsmaterial-ui
jmin22
jmin22

Reputation: 71

MUI DatePicker is showing beneath MUI drawer component

I have an MUI DatePicker component that is inside of an MUI drawer component. When you click on the date picker to pull up the calendar popup, it is rendering beneath the drawer.

enter image description here

I have tried to set the zIndex of the popper component through PopperProps but have had no luck.

Upvotes: 6

Views: 3257

Answers (4)

Amandeep Kochhar
Amandeep Kochhar

Reputation: 161

UPDATE 2024

With MUI V6 the version 6.19.6 https://mui.com/x/react-date-pickers/date-picker/, When you are using drawer and DatePicker renders behind the drawer, You can use slotProps like this.

import { DatePicker } from "@mui/x-date-pickers";

<DatePicker
 className="w-full"
 label="Thru date"
 value={toDate}
 onChange={setToDate}
 slotProps={{
  field: { clearable: true },
  popper: {
    disablePortal: true,
  },
 }}
/>

Upvotes: 2

Amir Rezvani
Amir Rezvani

Reputation: 1504

i fixed it this way (MUI v5):

import { DatePicker } from '@mui/x-date-pickers/DatePicker';

<DatePicker 
      DialogProps={{
          style: { zIndex: 1325 } // it should be more than 1200
      }}
/>

Upvotes: 0

haksuman
haksuman

Reputation: 29

Similar to Randolph's answer, disablePortal has resolved issue for me.

<DatePicker
{...props}
PopperProps={{
   disablePortal: true,
}}
/>

Upvotes: 2

Randolph
Randolph

Reputation: 959

In order to have the Popper show above the drawer component you need to supply to PopperProps an object with style property set to a high zIndex value. This value seemed to work perfectly fine for me.

<DatePicker
    {...props}
    PopperProps={{
       style: { zIndex: 1000000}}}
/>

Upvotes: 1

Related Questions