search

vaadin / vaadin-date-picker

The Web Component providing a date selection field with scrollable month calendar. Part of the Vaadin components.
https://vaadin.com/components
Apache License 2.0
165 stars 78 forks source link

fix: ensure focused date is visible if overlay is small #809

Closed sissbruecker closed 2 years ago

sissbruecker commented 2 years ago

Description

Fixes the overlay content to keep the focused date visible if the month scroller area does not fit a full month. Previously the overlay would only scroll to the top of the month, which means that later days in that month might not be visible. This change adds a new sub-month scroll mode to the overlay that is used when the scroll area does not fit a full month. In that mode the overlay will attempt to keep the week, that the focused date is in, visible.

This is a best effort implementation as the scroller's position is based on months, and the scroll position of a week can not be exactly calculated. I did manual testing on Chrome, FF, Safari and IE, and it seems to work reasonably well for the default Lumo and Material themes.

See video below for a demonstration:

https://user-images.githubusercontent.com/357820/195359489-b6dd1c58-ebea-4111-a3ea-4a34419bb95d.mov

Fixes #https://github.com/vaadin/web-components/issues/4037

Type of change

CLAassistant commented 2 years ago

CLA assistant check
All committers have signed the CLA.

sissbruecker commented 2 years ago

Tested a bit more and found one issue. When opening the overlay for the first time, the month below the one that is currently selected briefly displays the wrong month name. In the video below the 13th of October is selected, the month below should show "November", but is briefly displayed as "October":

https://user-images.githubusercontent.com/357820/195646876-3865651c-eef5-41bf-a7f9-b144b0d2c3e9.mov

(might have to use the scrubber to find the correct frames, it's more noticable when testing live)

sissbruecker commented 2 years ago

When opening the overlay for the first time, the month below the one that is currently selected briefly displays the wrong month name.

Added a commit that forces the infinite scroller to update when opening the overlay.

sissbruecker commented 2 years ago

After a discussion we also decided to reduce the month scroll offset (--vaadin-infinite-scroller-buffer-offset), so that a single month takes up less space, and the week-based scrolling is enabled as late as possible.