1612202 - Date and time inputs inside shadow DOM do not update their value or fire input events reliably

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, defect, P2)

Description

[TehShrike]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

Create a time input inside of a shadow DOM in a custom element.

Set focus into the time input and press two keys (e.g. "1" "1").

Easy reproduction here: https://stackblitz.com/edit/js-3mzvon?file=index.js (including a custom element with no shadow DOM, and a vanilla time input, for comparison).

Actual results:

The input should have fired two input events (one when each keypress happens), and after the second keypress, the input's value property should reflect the value displayed in the input.

Expected results:

The input fires only one input event, and after the second keypress, the input's value property reflects the value from after the first keypress.

Comment 1

[TehShrike]

Bah, I flipped the "actual" and "expected" answers. Sorry about that.

Expected results:

The input should have fired two input events (one when each keypress happens), and after the second keypress, the input's value property should reflect the value displayed in the input.

Actual results:

The input fires only one input event, and after the second keypress, the input's value property reflects the value from after the first keypress.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Hmm, does type=date also act up when in Shadow DOM?

Comment 4

[TehShrike]

Yes, date inputs are affected as well: https://stackblitz.com/edit/js-axgeoz?file=index.js

This could affect all input elements as far as I know. I haven't tested.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

This is only date and time, because they use datetimebox.js, which looks at document.activeElement, which doesn't account for Shadow DOM.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1612202 - Fix focus check for date / time inputs inside shadow DOM. r=smaug

The code was using activeElement which is not safe inside shadow DOM as it is
retargeted.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1461103d7f37
Fix focus check for date / time inputs inside shadow DOM. r=smaug

Comment 8

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/1461103d7f37