[date-picker] Date elements are not scrolled into view when navigating within the same month

[mlopezFC]

Description

Moving the focus ring in a date picker in Vaadin 14 makes it to disappear if the date picker is small enough. A similar issue was fixed apparently only in Vaadin 23, but it behaves differently in Vaadin 14:

~~In Vaadin 23 it works fine (recorded from the docs):~~ UPD: https://github.com/vaadin/web-components/issues/4037#issuecomment-1154835163

As you can see the date picker is correctly auto scrolled to the focused date.

In Vaadin 14 the focused ring gets lost (also recorded from the docs):

As you can see the focus ring gets hidden.

Expected outcome

In Vaadin 14 it should behave in the same way as in Vaadin 23, where the focus ring is never hidden.

Minimal reproducible example

DatePicker datePicker = new DatePicker("Start date");
add(datePicker);

Steps to reproduce

Just put a DatePicker in a page, and resize the browser as little as possible so you can reproduce the issue as seen in the attached videos.

Environment

Vaadin version(s): 14

Browsers

Issue is not browser related

[web-padawan]

The fix was backported to Vaadin 14 by https://github.com/vaadin/vaadin-date-picker/pull/799 and released in 14.8.11 I can confirm the issue is not fully fixed, and can be still reproduced in the docs for V14.

[vursen]

Vaadin 23 is actually not without this flaw too but there it is mitigated by the fact that the browser appears to scroll the element receiving native focus into view which is not the case for Vaadin 14 where dates are not natively focusable.

In Vaadin 23, the default browser behavior sometimes clashes with the revealDate logic which leads to unexpected scroll jumps, see the video:

https://user-images.githubusercontent.com/5039436/173520888-9ae7bdcd-42f1-4319-952e-a60276f7d737.mov

So what could I suggest?

~~1. Disable the browser auto scroll on Tab (only relevant for Vaadin 23).~~ UPD: https://github.com/vaadin/web-components/issues/4037#issuecomment-1154864567 2. Reimplement the revealDate() method so that it would actually scroll the provided date into view rather than just scrolling the month of that date into view (relevant for both versions).

(2) sounds like a challenge though because you first need to smoothly scroll the month into view and then smoothly scroll to the actual date. Perhaps, there is a way to calculate an optimal scroller position with the date in mind before any scrolling begins.

[web-padawan]

In Vaadin 23, the default browser behavior sometimes clashes with the revealDate logic

Let's investigate if we can fix this, it looks pretty annoying. Maybe it's worth creating a separate issue?

[vursen]

Well, now I think that (2) should be enough to get the issue fixed in both versions. If the date element was correctly scrolled into view by revealDate(), then the browser wouldn't need to scroll anything additionally.

[web-padawan]

Fixed by #4759 and https://github.com/vaadin/vaadin-date-picker/pull/809 (for Vaadin 14).