[pickers] The Popper position modification makes it impossible to select the year if this one is smaller than the months

[chrisidakwo]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

MUI.DatePicker.Issue.Wth.Popper.Positioning.mov

Steps:

1. Have a simple setup of the DatePicker component
2. Set the minDate prop value to January 1, 2018 (sub 5 years from 2023. Hard set the month and date to Jan and 1st, respectively)
3. Set the maxDate prop value to December 31, 2020 (sub 3 years from 2023. Hard set the month and date to Dec and 31st, respectively)
4. Set the view prop value to ['month', 'year']

Current behavior 😯

1. When I click on the calendar icon, the month calendar view opens as expected. It opens above the DatePicker input.
2. On selecting the month, the year calendar view opens as expected. It also opens above the DatePicker input.
3. On selecting a year, the year calendar view immediately goes below the DatePicker input which also removes the focus and closes it before I get a chance to select a year.
4. The only way I get to select a year successfully is if I hold on to the click and follow the year calendar view to its new position below the Datepicker input.

Expected behavior 🤔

The year calendar view should stay in place and not move its position. I suspect the change in position is because the content (number of available years) is small, hence it's readjusting to its default position.

Well, I'm able to assume this because, without the minDate and maxDate restrictions, the year calendar view continues to stay at the top of the Datepicker input after selecting a month. I only get this glitch whenever a boundary date duration of less than 10 years is set.

Context 🔦

This issue only happens on desktop, obviously.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.


 System:
    OS: macOS 13.4
  Binaries:
    Node: 20.1.0 - ~/.nvm/versions/node/v20.1.0/bin/node
    Yarn: Not Found
    npm: 9.6.4 - ~/.nvm/versions/node/v20.1.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.5
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.4 
    @mui/core-downloads-tracker:  5.13.4 
    @mui/icons-material: ^5.11.16 => 5.11.16 
    @mui/lab: ^5.0.0-alpha.133 => 5.0.0-alpha.133 
    @mui/material: ^5.13.4 => 5.13.4 
    @mui/private-theming:  5.13.1 
    @mui/styled-engine:  5.13.2 
    @mui/styled-engine-sc: ^5.12.0 => 5.12.0 
    @mui/system:  5.13.2 
    @mui/types:  7.2.4 
    @mui/utils:  5.13.1 
    @mui/x-data-grid: ^6.7.0 => 6.7.0 
    @mui/x-date-pickers: ^6.7.0 => 6.7.0 
    @types/react: ^18.0.21 => 18.0.28 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components: ^5.3.11 => 5.3.11 
    typescript: ^4.9.5 => 4.9.5

Order ID or Support key 💳 (optional)

No response

[chrisidakwo]

For better context, I want to add that whenever there's more space below the picker input and the month calendar opens below the input, I don't get this issue. See the video.

In the video, there's a footer. That's the workaround I guess: "There should be enough space below the input so that both calendars can open below it and we can avoid the unwanted behavior I recorded above".

Screen.Recording.2023-06-11.at.04.07.21.mov

[alexfauquette]

Effectively, I can reproduce the bug here: https://codesandbox.io/s/hungry-matan-gmqrmn?file=/demo.tsx

To reproduce it, the space under the field must be:

• small enough such that the month view does not have enough space
• large enough such that the year view has enough space

I think it's because the Poppper placement is computed before the end of the transition. And when mouse down occurs it refers the placement computation which leads to the glitch.

For quick fixes, you can override the behavior with

<DatePicker
	slotProps={{ popper: { ...popertProps you override } }}
/>

It could be by disabling the to flip, or modifying the year calendar size, or any other thing that match with you UI.
https://mui.com/material-ui/react-popper/#positioned-popper

For the propper fix of the bug It will require a bit more investigation

[alexfauquette]

Seems that it's due to some delay to remove fading elements.

The simplest quick fix might be to use views={["year", "month"]} such that it starts with the smallest popper and go to the larger one.

[chrisidakwo]

Seems that it's due to some delay to remove fading elements.

The simplest quick fix might be to use views={["year", "month"]} such that it starts with the smallest popper and go to the larger one.

Yeah, I'd done this already. Thanks

[alexfauquette]

Just thought, I did not mention, that another option to solve the issue could be to use reduceAnimations props which remove transitions.