fix: escape hatch for async event target accessor (#1510)

* fix: escape hatch for async event target accessor

When event's original target is from a non-keyed node, do not retarget event when accessed asynchronously

packages/@lwc/synthetic-shadow/src/faux-shadow/events.ts

@@ -27,6 +27,7 @@ import { pathComposer } from './../3rdparty/polymer/path-composer';
 import { retarget } from './../3rdparty/polymer/retarget';
 import { getOwnerDocument } from '../shared/utils';
 import { addEventListener, removeEventListener } from '../env/element';
+import { getNodeOwnerKey } from './node';
 
 interface WrappedListener extends EventListener {
     placement: EventListenerContext;
@@ -66,6 +67,11 @@ function targetGetter(this: Event): EventTarget | null {
     // Handle cases where the currentTarget is null (for async events),
     // and when an event has been added to Window
     if (!(originalCurrentTarget instanceof Node)) {
+        // TODO: issue #1511 - Special escape hatch to support legacy behavior. Should be fixed.
+        // If the event's target is being accessed async and originalTarget is not a keyed element, do not retarget
+        if (isNull(originalCurrentTarget) && isUndefined(getNodeOwnerKey(originalTarget as Node))) {
+            return originalTarget;
+        }
         const doc = getOwnerDocument(originalTarget as Node);
         return retarget(doc, composedPath);
     }

packages/integration-karma/test/shadow-dom/Event-properties/Event.target.spec.js

@@ -2,6 +2,7 @@ import { createElement } from 'lwc';
 import XAsyncEventTarget from 'x/asyncEventTarget';
 import XEventHandlingParent from 'x/eventHandlingParent';
 import XDocumentEventListener from 'x/documentEventListener';
+import XParentWithDynamicChild from 'x/parentWithDynamicChild';
 
 // The composed-event-click-polyfill doesn't work when native Shadow DOM is enabled on Safari 12.0.0 (it has been fixed
 // with Safari 12.0.1). The polyfill only patches the event javascript wrapper and doesn't have any effect on how Webkit
@@ -55,3 +56,28 @@ if (!process.env.NATIVE_SHADOW) {
         });
     });
 }
+
+describe('When event target is accessed async', () => {
+    if (!process.env.NATIVE_SHADOW) {
+        it('#W-6586380 - should return the original target, if original target node is not keyed', done => {
+            spyOn(console, 'error');
+            const elm = createElement('x-parent-with-dynamic-child', {
+                is: XParentWithDynamicChild,
+            });
+            document.body.appendChild(elm);
+            const child = elm.shadowRoot.querySelector('x-child-with-out-lwc-dom-manual');
+            const originalTarget = child.shadowRoot.querySelector('span');
+            elm.eventListener = evt => {
+                expect(evt.currentTarget).toBe(elm.shadowRoot.querySelector('div'));
+                expect(evt.target).toBe(child);
+                setTimeout(() => {
+                    // Expect event target to be not retargeted
+                    expect(evt.currentTarget).toBeNull();
+                    expect(evt.target).toBe(originalTarget);
+                    done();
+                });
+            };
+            originalTarget.click();
+        });
+    }
+});

packages/integration-karma/test/shadow-dom/Event-properties/x/childWithOutLwcDomManual/childWithOutLwcDomManual.html

@@ -0,0 +1,4 @@
+<template>
+    <div>
+    </div>
+</template>

packages/integration-karma/test/shadow-dom/Event-properties/x/childWithOutLwcDomManual/childWithOutLwcDomManual.js

@@ -0,0 +1,8 @@
+import { LightningElement } from 'lwc';
+
+export default class Child extends LightningElement {
+    renderedCallback() {
+        const container = this.template.querySelector('div');
+        container.appendChild(document.createElement('span'));
+    }
+}

packages/integration-karma/test/shadow-dom/Event-properties/x/parentWithDynamicChild/parentWithDynamicChild.html

@@ -0,0 +1,5 @@
+<template>
+    <div onclick={clickHandler}>
+        <x-child-with-out-lwc-dom-manual></x-child-with-out-lwc-dom-manual>
+    </div>    
+</template>

packages/integration-karma/test/shadow-dom/Event-properties/x/parentWithDynamicChild/parentWithDynamicChild.js

@@ -0,0 +1,10 @@
+import { LightningElement, api } from 'lwc';
+
+export default class ParentWithDynamicChild extends LightningElement {
+    @api
+    eventListener;
+
+    clickHandler(evt) {
+        return this.eventListener && this.eventListener(evt);
+    }
+}