Open Bug 1511642 Opened 6 years ago Updated 2 years ago

Event handler assigned to template content is reset when fragment is appended to DOM

Categories

(Core :: DOM: Events, defect, P3)

64 Branch
defect

Tracking

()

UNCONFIRMED

People

(Reporter: marty.nelson, Unassigned)

Details

Attachments

(1 file)

Attached file index.html
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:64.0) Gecko/20100101 Firefox/64.0 Steps to reproduce: See attached index.html. All of these are necessary to produce the error: 1. Element has an initial on<event> handler 1. Element is part of a template content fragment 1. Element has on<event> property set to a new function 1. Fragment containing the element is appended to the dom Actual results: The <on>event property is reset to the original function body (though a new wrapper function is created) Expected results: The assigned function should be used as the on<event> property value.
I verified this issue on Mac 10.13 with the latest Firefox release version 64.0 (64-bit) and I cannot reproduce it. Can you please test this in safe mode? Here is a link that can help you: https://goo.gl/AR5o9d. I think it will be a good idea to retest this on the latest Firefox Nightly. Here is a link form where you can download it: https://nightly.mozilla.org. If you still have the issue please create a new profile, you have the steps here: https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles?redirectlocale=en-US&redirectslug=Managing-profiles#w_starting-the-profile-manager Could you please create a videoscreen capture when you can and if you have time? To have more details about this issue.
Flags: needinfo?(marty.nelson)
Hi, Marking this as Resolved: Incomplete due to the lack of response from the Marty. If the issue is still reproducible with the latest Firefox version, feel free to reopen the bug with more information.
Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Resolution: --- → INCOMPLETE
Hey, sorry about the delay getting back to you. Just verified in Firefox nightly that this is still an issue. The bug is demonstrated at the index.html I supplied, but let me walk you through it. In the <body>, there is an element inside a <template> element: ``` <template id="template"> <div onclick="alert('initial')">Click Me</div> </template> ``` Inside a <script> immediately following the above, we get a reference to the content property of <template> that returns the documentFragment. In addition, set a reference to the div and the original onclick handler: ``` const fragment = document.getElementById('template').content; const div = fragment.querySelector('div'); const originalHandler = div.onclick; ``` Now we are going to set the onclick property of that div to a new function, and log the assigned function body (it shows the correct function we just assigned): ``` div.onclick = function() { alert('set handler'); }; console.log(div.onclick.toSource()); // logs: // (function() { // alert('set handler'); // }) ``` Here is were the error begins, we append the content fragment to the body, then check the body of the onclick function: ``` console.log(div.onclick.toSource()); // logs: // function onclick(event) { // alert('initial') // } ``` Which is the original assigned handler! The last bit should help diagnose the issue. Has the original function been reassigned or is something else going on? ``` console.log('same function?', div.onclick === originalHandler); // logs: // same function? false ``` This is me hypothesizing, I don't know the internals, but I suspect because the original onclick attribute receives a JavaScript snippet that needs to be wrapped in a function, there is some sort of internal check when the element is appended that encounters the snippet and recreates the handler. Perhaps when the .onclick property is set, it needs to clear attribute snippet that causes the wrapping function to be created
Flags: needinfo?(marty.nelson)
Status: RESOLVED → UNCONFIRMED
Component: Untriaged → Event Handling
Product: Firefox → Core
Resolution: INCOMPLETE → ---
Component: Event Handling → DOM: Events
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: