fix(tab-bar): prevent keyboard controller memory leak on rapid mount/unmount

Author: ShaneK

core/src/components/tab-bar/tab-bar.tsx

@@ -23,6 +23,7 @@ import type { TabBarChangedEventDetail } from './tab-bar-interface';
 export class TabBar implements ComponentInterface {
   private keyboardCtrl: KeyboardController | null = null;
   private didLoad = false;
+  private isComponentConnected = false;
 
   @Element() el!: HTMLElement;
 
@@ -88,7 +89,9 @@ export class TabBar implements ComponentInterface {
   }
 
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+    this.isComponentConnected = true;
+
+    const keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
       /**
        * If the keyboard is hiding, then we need to wait
        * for the webview to resize. Otherwise, the tab bar
@@ -100,11 +103,24 @@ export class TabBar implements ComponentInterface {
 
       this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
     });
+
+    /**
+     * Destroy the keyboard controller if the component was
+     * disconnected during async initialization to prevent memory leaks.
+     */
+    if (this.isComponentConnected) {
+      this.keyboardCtrl = keyboardCtrl;
+    } else {
+      keyboardCtrl.destroy();
+    }
   }
 
   disconnectedCallback() {
+    this.isComponentConnected = false;
+
     if (this.keyboardCtrl) {
       this.keyboardCtrl.destroy();
+      this.keyboardCtrl = null;
     }
   }
 

core/src/components/tab-bar/test/lifecycle/tab-bar.e2e.ts

@@ -0,0 +1,121 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Tests for keyboard controller memory leak fix when tab-bar
+ * is rapidly mounted/unmounted.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('tab-bar: lifecycle'), () => {
+    test('should not error when rapidly mounting and unmounting', async ({ page }) => {
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+
+      await page.setContent(
+        `
+        <div id="container"></div>
+        <script>
+          const container = document.getElementById('container');
+
+          for (let i = 0; i < 10; i++) {
+            const tabBar = document.createElement('ion-tab-bar');
+            tabBar.innerHTML = \`
+              <ion-tab-button tab="tab1">
+                <ion-label>Tab 1</ion-label>
+              </ion-tab-button>
+            \`;
+            container.appendChild(tabBar);
+            container.removeChild(tabBar);
+          }
+        </script>
+        `,
+        config
+      );
+
+      await page.waitForTimeout(500);
+
+      expect(errors.length).toBe(0);
+    });
+
+    test('should cleanup keyboard controller when removed from DOM', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'IONIC-82',
+      });
+
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+
+      await page.setContent(
+        `
+        <div id="container">
+          <ion-tab-bar id="test-tab-bar">
+            <ion-tab-button tab="tab1">
+              <ion-label>Tab 1</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        </div>
+        `,
+        config
+      );
+
+      const tabBar = page.locator('#test-tab-bar');
+      await expect(tabBar).toBeVisible();
+
+      await page.evaluate(() => {
+        document.getElementById('test-tab-bar')?.remove();
+      });
+
+      await page.waitForTimeout(100);
+
+      await expect(tabBar).not.toBeAttached();
+      expect(errors.length).toBe(0);
+    });
+
+    test('should handle re-mounting after unmount', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container"></div>
+        <script>
+          const container = document.getElementById('container');
+
+          async function testRemount() {
+            const tabBar = document.createElement('ion-tab-bar');
+            tabBar.id = 'remount-tab-bar';
+            tabBar.innerHTML = \`
+              <ion-tab-button tab="tab1">
+                <ion-label>Tab 1</ion-label>
+              </ion-tab-button>
+            \`;
+            container.appendChild(tabBar);
+
+            await new Promise(r => setTimeout(r, 100));
+
+            container.removeChild(tabBar);
+
+            await new Promise(r => setTimeout(r, 50));
+
+            container.appendChild(tabBar);
+          }
+
+          testRemount();
+        </script>
+        `,
+        config
+      );
+
+      await page.waitForTimeout(500);
+
+      const tabBar = page.locator('#remount-tab-bar');
+      await expect(tabBar).toBeVisible();
+    });
+  });
+});

core/src/components/tab-bar/test/tab-bar.spec.ts

@@ -0,0 +1,66 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { TabBar } from '../tab-bar';
+import { TabButton } from '../../tab-button/tab-button';
+
+describe('tab-bar', () => {
+  describe('basic rendering', () => {
+    it('should render with tab buttons', async () => {
+      const page = await newSpecPage({
+        components: [TabBar, TabButton],
+        html: `
+          <ion-tab-bar>
+            <ion-tab-button tab="tab1">
+              <ion-label>Tab 1</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+      });
+
+      expect(page.root).toBeTruthy();
+      expect(page.root?.tagName).toBe('ION-TAB-BAR');
+    });
+
+    it('should have correct role attribute', async () => {
+      const page = await newSpecPage({
+        components: [TabBar],
+        html: `<ion-tab-bar></ion-tab-bar>`,
+      });
+
+      expect(page.root?.getAttribute('role')).toBe('tablist');
+    });
+  });
+
+  describe('lifecycle', () => {
+    it('should handle removal without errors', async () => {
+      const page = await newSpecPage({
+        components: [TabBar],
+        html: `<ion-tab-bar></ion-tab-bar>`,
+      });
+
+      page.root?.remove();
+      await page.waitForChanges();
+
+      expect(page.body.querySelector('ion-tab-bar')).toBeNull();
+    });
+
+    it('should handle rapid mount/unmount without errors', async () => {
+      const page = await newSpecPage({
+        components: [TabBar],
+        html: `<div id="container"></div>`,
+      });
+
+      const container = page.body.querySelector('#container')!;
+
+      for (let i = 0; i < 3; i++) {
+        const tabBar = page.doc.createElement('ion-tab-bar');
+        container.appendChild(tabBar);
+        await page.waitForChanges();
+        tabBar.remove();
+        await page.waitForChanges();
+      }
+
+      expect(container.children.length).toBe(0);
+    });
+  });
+});