[DatePicker] Year overflow broken

[DylanSimowitz]

Problem description

I noticed in the docs that the datepicker should go 100 years backwards and 100 years forwards by default, however in the docs and in any datepicker I make it only goes to 2013. I found the issue to be justify-content: center. This centers the flex item vertically because the flex-direction is column. For some reason overflow doesn't take into account the height before the center point of the flex item. Setting the flex-direction to row (default value) fixes this issue and I can see all the way to 1916. Unfortunately this breaks positioning of datepicker ranges that do not overflow. They are no longer vertically centered. Setting align-items: center to center non-overflowed ranges will subsequently break our original fix of overflowed ranges for the same reason that justify-content breaks it in the current implementation.

TL;DR: Flexbox centering and overflow don't work nicely.

Steps to reproduce

Look at the Simple example in the docs.

Versions

• Material-UI: 15
• React: 15
• Browser: Chrome/Firefox

Images & references

[DylanSimowitz]

mui/material-ui#4321 This fixes the overflow while maintaining vertical alignment.

[lostpebble]

This is a major issue. As it stands now, the Date Picker is basically unusable if you want to work with dates ranging more than a few years (picking a birthday etc.). Luckily I noticed it before deploying my new version and patched it as per the pull request, others might not be so lucky.

[DylanSimowitz]

@lostpebble Not sure if you used my PR, but mui/material-ui#4344 provides a better fix.

[lostpebble]

@ToxicSalt Yep, that was the one I used, thanks. Works perfectly now.

[robertleeplummerjr]

Has this been released yet? It looks as though it is in a state of limbo.

[robertleeplummerjr]

nm, it is in 0.15.2, testing now. Good work fellas!