2048623 - web.fourvenues.com - "Date of birth" button does not work

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Raul Bucata]

Environment:
Operating system: Windows 10
Firefox version: Firefox 140.0

Steps to reproduce:

1. Navigate to: https://web.fourvenues.com/en/adam-events/events/bring-your-own-ally-doeta-in-gesprek-met-merol-jurre-geluk-en-loiza-lamers-over-allyship-31-07-20261-DNR6/guest-list/l103tv2r338g9epq31nan6ijy54n01fi/1/form
2. Click on the "Date of birth" option and observe

Expected Behavior:
Calendar is triggered

Actual Behavior:
Nothing happens

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/225346

Comment 1

[Raul Bucata]

Attachment: Chr vs ff

Comment 2

[Daniel Holbert [:dholbert]]

This is an <input type="date"> field with opacity:0 (i.e. it doesn't paint), covered up by a button that looks like a <input type="date"> (which passes its clicks down to the input element).

I actually get EXPECTED RESULTS in Firefox if I click just the right spot -- Firefox's calendar icon -- which is hidden but present.

The relevant difference here is just that Chrome spawns a datepicker wherever you click in the widget, whereas Firefox only spawns one if you click the calendar icon (which in this case is invisible, and the site adds their own icon in a different spot on the widget)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 1

Comment 4

[Daniel Holbert [:dholbert]]

See attached reduced testcase, where I switched the opacity:0 to opacity:0.2 so that you can actually barely see the "real" calendar icon and the rest of the real date widget.

In Chrome, the popup appears no matter where you click on the widget.

In Firefox (on desktop at least), the popup only appear if you click the barely-visible calendar icon at the right of the widget (not visible on the actual site). Everywhere else, you end up focusing the input element's mm/dd/yyyy fields for manual editing (and that focusing/manual editing is not visible on the actual site, because of the opacity:0.

Comment 5

[Daniel Holbert [:dholbert]]

Aha, Chrome behaves like Firefox does on a simple testcase here, like this one:

data:text/html,<input type="date" style="Width: 400px">

Here's the relevant bit on the site and the reduced testcase -- this selector targets Chrome's calendar button and makes it massive (covering the widget):

    div.datepicker input::-webkit-calendar-picker-indicator {
      position: absolute;
      top: -150%;
      left: -150%;
      width: 300%;
      height: 300%;
      cursor: pointer;
    }

Comment 6

[Daniel Holbert [:dholbert]]

I spun off bug 2051201 as a platform bug here.

Comment 7

[Daniel Holbert [:dholbert]]

In the meantime I'm not sure if there's a lightweight intervention we could add here. I might be wrong but I don't think we have a similar moz-prefixed pseudo selector that we could deploy to repeat the same CSS rule that I quoted in comment 5.

I found one stackoverflow post requesting (but not finding) such a selector:
https://stackoverflow.com/questions/78512193/how-to-style-the-date-picker-icon-in-firefox

And some quick searchfox poking finds that the button might be an element with ID "picker-button" inside a shadow-root inside the input element:
https://searchfox.org/firefox-main/rev/542208dcdb891e1efa70d9411d612c0ee0726dd8/toolkit/content/tests/browser/datetime/browser_datetime_timepicker.js#167
...and that's presumably not styleable by web content (or our own interventions).