Closed Bug 1612202 Opened 2 years ago Closed 2 years ago

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

Categories

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

72 Branch
defect

Tracking

()

RESOLVED FIXED
mozilla74
Tracking Status
firefox74 --- fixed

People

(Reporter: me, Assigned: emilio)

References

(Blocks 2 open bugs)

Details

Attachments

(1 file)

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.

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.

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

Component: Untriaged → DOM: Events
Product: Firefox → Core
Blocks: shadowdom
Component: DOM: Events → DOM: Core & HTML

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

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.

Summary: Time inputs inside a shadow DOM do not update their value or fire input events reliably → Inputs inside a shadow DOM do not update their value or fire input events reliably

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

Assignee: nobody → emilio
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: Inputs inside a shadow DOM do not update their value or fire input events reliably → Date and time inputs inside shadow DOM do not update their value or fire input events reliably

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

Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1461103d7f37
Fix focus check for date / time inputs inside shadow DOM. r=smaug
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla74
QA Whiteboard: [qa-74b-p2]
You need to log in before you can comment on or make changes to this bug.