[Bug/Design Bug] b-form-datepicker keep changing height when positioned above

[matanshukry]

Describe the bug

When using b-form-datepicker, where the modal window opens up above the bar (depends on scroll position), the modal keep changing height depending on the date.

The result is if the user starts at a certain year and want to go back more than a few years by repeatedly clicking the double-left-arrow icon, he will have to keep moving the cursor position.

Steps to reproduce the bug

1. Go to https://bootstrap-vue.org/docs/components/form-datepicker
2. Make sure you don't scroll down, so the first form datepicker in the page is positioned correctly.
3. Click on the form datepicker to open it.
4. Position the mouse cursor above the double-left-arrow
5. Click the left mouse button multiple times
6. You'll see the position of it changes, which forces the operation to be a lot slower and badly designed (UX).

Expected behavior

The height should be the same, which mean the modal should always display the same amount of rows.

Versions

Libraries:

• All is latest since you can simply see it on the documentation site

• BootstrapVue: 2.#.#

• Bootstrap: 4.#.#

• Vue: 2.#.#

Environment:

• Device: PC
• OS: Windows 10
• Browser: Chrome
• Version: 81.0.4044.138

Demo link

Shown above with the official documentation site

Additional context

I also have a video showing what I mean, if the explanation wasn't good enough:

https://streamable.com/5h0dhf

fyi: I'm refreshing the page in the beginning of the video

[tmorehouse]

What you are seeing is Popper.js repositioning the picker dropdown (dropup in this case) so that the bottom appears at the same position above the "input" whenever the height of the picker changes. This is similar to what happens with dropup menus when the number of items changes (or the dropdown items text changes) which would cause a height change in the dropdown menu (datepicker an timepicker are actually dropdown menus)

If the "input" in near the top of the page so that teh dropdown appears below the "input", the change is height is not apparent, except for the optional bottom controls.

If you try a native datepicker on Chrome (<input type=date">) and have the input positioned near the bottom of the viewport, you will see the same effect happen (as the height changes depending on the month)

Example: you can see that the native picker aligns the bottom of the picker with the top of the input, and the next/prev month buttons move 'down" by one "row" when the month has less weeks in it:

[matanshukry]

@tmorehouse I understand all of that, but just because the native one doesn't work as good as it should, ti doesn't mean the bootstrap-vue should have the same issue.. don't you think?

[tmorehouse]

It works the way it does because that is how Popper.js positions it. Otherwise it would have a gap under the picker and above the "input" when the number of weeks in the month changes (or instead of the gap it would overlap the input when the number of weeks increases for a month).

[matanshukry]

@tmorehouse it could be solved it by making the height always the same though.

I'm not really sure what the logic and why some months show 6 rows while other 5. You could display the months with 6 rows using only 5 (while still showing all days).

Another way would be to add another row for the months that only display 5.

that is - make all months display the same amount of rows

[tmorehouse]

The first option is not feasible as each date needs to be a unique button (as we can't stick two dates on the same "cell") and the numerical flow needs to increment from left to right top to bottom for keyboard only users and screen reader users.. The latter option might be possible. Although then we will probably get complains that we are showing rows that are not clickable, and the extra row that is not "reachable" will be announced to screen reader users but they will never be able to access them without jumping to the next month.

[matanshukry]

I think the 2nd option isn't that bad. Obviously though, it shouldn't be the default and should only be an option.

What do you think about an option to only let the popover pop below? It might mean users will need to scroll to see the content, but I think it's a good option.

[tmorehouse]

You can do that now with the no-flip prop: https://bootstrap-vue.org/docs/components/form-datepicker#comp-ref-b-form-datepicker-props (same prop as found on <b-dropdown>)

[matanshukry]

Cool great. I don't think you like any of the other options so I'll close this issue