0

I'm using MUI v6.0.2 and I came across an issue with popper placement. When I scroll up and try to open a date picker it doesn't open on the top of the input, but somewhere upper in the page. Bottom placement works good, as expected. But it looks something wrong with placement top.

Current behaviour

My dependency: "@mui/x-date-pickers": "^6.0.4",

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

Expected behaviour

That's my code. I didn't pass any other properties to the component.

<Box marginTop={'1000px'}>
  <h2>Date picker</h2>
  <DatePicker />
</Box>
  • Had the same issue and I set the anchorEl property of the Popper component within DatePicker to the Grid container. – db7638 Aug 11 '23 at 00:13

1 Answers1

-1

I have exactly the same issue, I am using DesktopDatePicker (x-date-pickers": "^6.2.1") with TextField inside. On first open action it renders in proper place, anchored to the input. But when I try to change the year, Popper jumps to left-top corner.

  • I have found the fix, `slots` should be fed with component, not the rendering function. More details are provided here: https://github.com/mui/mui-x/issues/8411 – Lukasz Wach Apr 27 '23 at 06:43
  • 1
    As it stands, this post is not an answer. You should add the 'fix' your found into the answer itself, or it will be flagged and deleted. – Adrian Mole Apr 29 '23 at 12:29