1761296 - monthpicker for <input type="date/datetime-local"> should have selected month and year vertically aligned even if items restricted with min and max attributes

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Attachment: screenshot month picker for datetime-local

All Firefox versions up to current Nightly (100.0a1) on Windows 8.1.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local has as first example:

<input type="datetime-local" id="meeting-time"
       name="meeting-time" value="2018-06-12T19:30"
       min="2018-06-07T00:00" max="2018-06-14T00:00">

If one clicks onto the date and then onto "June 2018" to open the month picker, the month name and the year are not vertically aligned but should be. This issue cannot be observed if there are no min and max attributes set which restrict which years are shown.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Happens with <input type=date> as well, so probably a lot older:

data:text/thml,<input type="date" value="2018-06-12" min="2018-06-07" max="2018-06-14">

Comment 2

[Jonathan Kew [:jfkthame]]

Looks like the issue is basically that the year is vertically centered within the available space, but the current month isn't quite centered; it's shifted up a bit. Note how in the screenshot "Apr" seems to be top-aligned at the start of the vertical space, while "Aug" has significant space below it.

This seems a pretty minor cosmetic detail, but it does look untidy. Maybe we can improve the computation of the initial scroll position such that the current value gets accurately centered.

Comment 3

[Anna Yeddi [:ayeddi]]

Attachment: Month-year-values-are-now-aligned-Firefox-Nightly-115.0a1-Mac.png

Comment 4

[Anna Yeddi [:ayeddi]]

Attachment: Month-year-values-are-now-aligned-Firefox-Nightly-115.0a1-Win.png

Month-year selection values are aligned and working as expected - attached are examples from Firefox Nightly 115.0a1 on MacOS and WinOS (both with HCM on)

Comment 5

[Anna Yeddi [:ayeddi]]

Attachment: Month-year-values-are-now-aligned-Firefox-Nightly-115.0a1-Mac.png

Comment 6

[Anna Yeddi [:ayeddi]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #1)

Happens with <input type=date> as well, so probably a lot older:

data:text/thml,<input type="date" value="2018-06-12" min="2018-06-07" max="2018-06-14">

This issue now looks fixed, and since you fixed the bug 1804554 there are no scrollbars too (but it looks like it was fixed before then). Closing as WFM?