[DatePicker] Inline mode has multiple positioning and transition placement/direction issues
Closed this issue · 7 comments
Problem description
DatePicker in inline mode is positioned incorrectly.
Steps to reproduce
Go to the demo page http://www.material-ui.com/#/components/date-picker
Scroll down a bit so that Inline section is visible but it should stay at the bottom of the page.
Focus the date picker field.
The date picker component appears sticking to the top of the page.
Versions
- Material-UI:
- React:
- Browser:
@halt-hammerzeit I don't see your exact problem -- but I see one very similar (it does not stick to the top, but rather opens unnaturally):
- Our datepicker is not keyboard accessible (can't focus the input to active it...)
- The open transition isn't natural when the datepicker input field is near the bottom of the page. Expanding popovers are supposed to appear to expand from the element you click on rather than the middle of nowhere:
Yes, that's exactly what I'm talking about: it is supposed to open downwards when you click the input.
But it opens as if the focused field was at the top of the page.
If you don't click cancel and keep on scrolling down then it places itself at the correct position once the space under the input is sufficient.
Ok, since you know about that issue you can close this github issue whenever you want.
It was just a notification for your team.
@halt-hammerzeit even the regular implementation is incorrect -- it should cover the text field it is attached to. That's how other popovers on form elements should act according to spec.
Leave this open so we have an issue for it.
@halt-hammerzeit What you originally described (dialog sticks to the top of the screen), what @nathanmarks mentioned (animation origin), what you responded with (datepicker position), and @nathanmarks subsequently mentioned (anchor origin) are four different things.
The first I can't reproduce either.
The second is covered by #2968 (but the wording there could be clearer)
The third can be fixed by canAutoPosition={false} in Container in DatePickerDialog.js
The fourth would be fixed by anchorOrigin={{horizontal: 'left', vertical: 'top'}} in the same component, but anchorEl isn't targeting the TextField, so that would need to be addressed as well.
Closing for #4787