1818377 - ClipboardEvent events don't bubble properly on date inputs

Status: NEW

(Toolkit :: UI Widgets, defect)

Description

[John Norman]

Attachment: Example that shows how it is broken.

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0

Steps to reproduce:

Select a date input by clicking on one of the date parts and try to paste data.
Select a date input by TAB'ing into it and try to paste data.

Actual results:

When you select a date input by clicking a date part, paste events (and other ClipboardEvents) do not bubble up to the <input> element. They get eaten by the date part you have selected. It seems that whatever internal element is being used for the date part prevents events from bubbling back up. When you TAB into the <input>, the focus is most likely on the <input> rather than the date part and so the paste event DOES get caught.

Expected results:

I would have expected that clipboard events would get caught no matter what internal element of the date picker is in focus. If the date, month, or year element is focused, I should be able to see clipboard events on the <input>.

Comment 1

[John Norman]

The attached .html file provides an example of how this is broken. I've attached a 'paste' event on both inputs. If the <input type="text"> gets a 'paste' event, it uppercases the text. If the <input type="date"> element gets the event, it fills in the date.

If you copy a date, click the date input, and paste, nothing happens. However, if you select the text input, press Tab, and then paste, it works.

Comment 2

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Managed to reproduce this on:

• Nightly 112.0a1;
• Firefox 110.0.1;
• Firefox 111.0b7

Tested on:

• macOS 12;
• Windows 11;
• Ubuntu 22;

Setting as NEW so the developers can have a look.

Comment 3

[John Norman]

I believe I have discovered where the issue lies; it might end up lying in the datetimebox widget.

https://searchfox.org/mozilla-central/source/toolkit/content/widgets/datetimebox.js#567

Line 295 is the start of a function that adds listeners for events that don't get bubbled out of the shadow DOM. The "buildEditFields" function on line 786 calls it to add the events to each date part that gets listed inside the input control. It appears that the goal is to handle these functions appropriately, but in line 567 the clipboard events just get ignored. I am of the opinion that the clipboard events should get re-targeted to the <input> event.

Is this bug still filed in the correct component if it is a bug in the widget code?

Comment 4

[Andrew McCreight [:mccr8]]

Thanks for investigating. I'll move it to what seems like the right component for this code.