From ee4aa0b4bcc2162d7745f188b8e754cb5d7abda2 Mon Sep 17 00:00:00 2001
From: Dominique Wirz <dominique.wirz@gmail.com>
Date: Mon, 9 Dec 2024 20:52:17 +0100
Subject: [PATCH] fix: Change hasHostListenerAttached from var to protoype
 property (#6074)

* fix: Change hasHostListenerAttached from var to protoype property

* prefix property with __ to indicate internal usage

---------

Co-authored-by: Dominique Wirz <dominique@smartive.ch>
---
 src/runtime/bootstrap-custom-element.ts       |  6 +-
 .../event-re-register.test.tsx                | 68 +++++++++++++++++++
 2 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/src/runtime/bootstrap-custom-element.ts b/src/runtime/bootstrap-custom-element.ts
index 70296d5978e..aeff2f4818e 100644
--- a/src/runtime/bootstrap-custom-element.ts
+++ b/src/runtime/bootstrap-custom-element.ts
@@ -67,16 +67,16 @@ export const proxyCustomElement = (Cstr: any, compactMeta: d.ComponentRuntimeMet
 
   const originalConnectedCallback = Cstr.prototype.connectedCallback;
   const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
-  let hasHostListenerAttached = false;
   Object.assign(Cstr.prototype, {
+    __hasHostListenerAttached: false,
     __registerHost() {
       registerHost(this, cmpMeta);
     },
     connectedCallback() {
-      if (!hasHostListenerAttached) {
+      if (!this.__hasHostListenerAttached) {
         const hostRef = getHostRef(this);
         addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
-        hasHostListenerAttached = true;
+        this.__hasHostListenerAttached = true;
       }
 
       connectedCallback(this);
diff --git a/test/wdio/event-listener-capture/event-re-register.test.tsx b/test/wdio/event-listener-capture/event-re-register.test.tsx
index 56ca474c4c7..f0fb9ebc01b 100644
--- a/test/wdio/event-listener-capture/event-re-register.test.tsx
+++ b/test/wdio/event-listener-capture/event-re-register.test.tsx
@@ -44,4 +44,72 @@ describe('event-listener-capture using lazy load components', function () {
     // check if event fired 6 times
     await expect(reattach).toHaveText(expect.stringContaining('Event fired times: 6'));
   });
+
+  it('should attach keydown event listener once per component', async () => {
+    const elem = document.createElement('event-re-register') as HTMLElement;
+    elem.setAttribute('id', 'elem1');
+    document.body.appendChild(elem);
+
+    const reattach = $('#elem1');
+    await expect(reattach).toBePresent();
+
+    // focus on element 1
+    await reattach.click();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+
+    // check if event fired 3 times on first element
+    await expect(reattach).toHaveText(expect.stringContaining('Event fired times: 3'), {
+      message: 'Second element should have fired 3 times',
+    });
+
+    const elem2 = document.createElement('event-re-register') as HTMLElement;
+    elem2.setAttribute('id', 'elem2');
+    document.body.appendChild(elem2);
+
+    const reattach2 = $('#elem2');
+    await expect(reattach2).toBePresent();
+
+    // focus on element 2
+    await reattach2.click();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+
+    // check if event fired 3 times on second element
+    await expect(reattach2).toHaveText(expect.stringContaining('Event fired times: 3'), {
+      message: 'Second element should have fired 3 times',
+    });
+
+    // remove node from DOM
+    elem.remove();
+    elem2.remove();
+
+    // reattach node to DOM
+    document.body.appendChild(elem);
+    document.body.appendChild(elem2);
+
+    // retrigger event
+    await reattach.click();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+
+    // check if event fired 6 times on first element
+    await expect(reattach).toHaveText(expect.stringContaining('Event fired times: 6'), {
+      message: 'First element should have fired 3 times',
+    });
+
+    // retrigger event on element 2
+    await reattach2.click();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+    await browser.action('key').down('a').pause(100).up('a').perform();
+
+    // check if event fired 3 times on second element
+    await expect(reattach2).toHaveText(expect.stringContaining('Event fired times: 6'), {
+      message: 'Second element should have fired 3 times',
+    });
+  });
 });