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 <[email protected]>
ionic-team · Dec 9, 2024 · ee4aa0b · ee4aa0b
1 parent 6c302ec
commit ee4aa0b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 3 deletions.
diff --git 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
@@ -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',
+    });
+  });
 });