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>

Author: dwirz

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);

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',
+    });
+  });
 });