fix(uui-tab-group): async tabs are not calculated correctly and have memory leaks (#726)

* fix button placement

* rename classes

* fix async story

* add resize observer to all tabs

* fix memory leak and performance issues

* flex stories

* revert display: block

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: JesmoDev

packages/uui-tabs/lib/uui-tab-group.element.ts

@@ -55,6 +55,9 @@ export class UUITabGroupElement extends LitElement {
   #visibilityBreakpoints: number[] = [];
 
   #resizeObserver = new ResizeObserver(this.#onResize.bind(this));
+  #tabResizeObservers: ResizeObserver[] = [];
+
+  #breakPointCalculationInProgress = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -70,6 +73,7 @@ export class UUITabGroupElement extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#resizeObserver.unobserve(this);
+    this.#cleanupTabs();
   }
 
   #onResize(entries: ResizeObserverEntry[]) {
@@ -85,15 +89,26 @@ export class UUITabGroupElement extends LitElement {
     }
   }
 
-  #onSlotChange() {
+  #cleanupTabs() {
     this.#tabElements.forEach(el => {
       el.removeEventListener('click', this.#onTabClicked);
+      this.#tabResizeObservers.forEach(observer => observer.disconnect());
     });
+    this.#tabResizeObservers.length = 0;
+  }
+
+  #onSlotChange() {
+    this.#cleanupTabs();
 
     this.#setTabArray();
 
     this.#tabElements.forEach(el => {
       el.addEventListener('click', this.#onTabClicked);
+      const observer = new ResizeObserver(
+        this.#calculateBreakPoints.bind(this)
+      );
+      observer.observe(el);
+      this.#tabResizeObservers.push(observer);
     });
   }
 
@@ -131,9 +146,18 @@ export class UUITabGroupElement extends LitElement {
   };
 
   async #calculateBreakPoints() {
+    if (this.#breakPointCalculationInProgress) return;
+
+    // Prevent multiple calculations from happening in the same frame
+    this.#breakPointCalculationInProgress = true;
+    requestAnimationFrame(() => {
+      this.#breakPointCalculationInProgress = false;
+    });
+
     // Whenever a tab is added or removed, we need to recalculate the breakpoints
 
     await this.updateComplete; // Wait for the tabs to be rendered
+
     const gapCSSVar = Number.parseFloat(
       this.style.getPropertyValue('--uui-tab-group-gap')
     );
@@ -164,8 +188,7 @@ export class UUITabGroupElement extends LitElement {
     const moreButtonWidth = this._moreButtonElement.offsetWidth;
 
     const containerWithoutButtonWidth =
-      containerWidth -
-      (moreButtonWidth ? moreButtonWidth + this.#currentGap : 0);
+      containerWidth - (moreButtonWidth ? moreButtonWidth : 0);
 
     // Do the update
     // Reset the hidden tabs
@@ -237,7 +260,9 @@ export class UUITabGroupElement extends LitElement {
   render() {
     return html`
       <div id="main">
-        <slot @slotchange=${this.#onSlotChange}></slot>
+        <div id="grid">
+          <slot @slotchange=${this.#onSlotChange}></slot>
+        </div>
         <uui-button
           popovertarget="popover-container"
           style="display: none"
@@ -261,11 +286,16 @@ export class UUITabGroupElement extends LitElement {
   static styles = [
     css`
       :host {
-        display: block;
         width: 100%;
       }
 
       #main {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      #grid {
+        width: 1fr;
         display: flex;
         height: 100%;
         min-height: 48px;

packages/uui-tabs/lib/uui-tabs.story.ts

@@ -225,40 +225,51 @@ WithGap.parameters = {
   },
 };
 
-export const FlexLayout: Story = props => html`
-  <h3>Tabs implemented into Flex-box scenario</h3>
-  <p>
-    In this case we want the input to grow and the tabs to take up the remaining
-    space:
-  </p>
-  <uui-icon-registry-essential>
-    <div
-      style="display: flex; outline: 1px solid black; max-width: 800px; height: 100%; align-items: center; padding-left: 12px;">
-      <uui-input style="flex-grow: 1; min-width: 200px"></uui-input>
-      <uui-tab-group
-        dropdown-direction="horizontal"
-        style="
-        flex-grow: 1;
+export const Async: Story = props => {
+  // async insert tabs after 1 second
+  setTimeout(() => {
+    const tabs = document.querySelector('uui-tab-group');
+
+    if (!tabs) return;
+
+    const tab = document.createElement('uui-tab');
+    tab.label = 'Async';
+    tab.innerHTML = 'Async';
+    tabs.appendChild(tab);
+
+    setTimeout(() => {
+      tab.innerHTML = 'Async more text';
+    }, 1000);
+  }, 1000);
+
+  return html`
+    <uui-icon-registry-essential>
+      <div style="display: flex">
+        <uui-tab-group
+          dropdown-direction="horizontal"
+          style="
+          margin: auto;
         --uui-tab-group-gap: 25px;
         font-size: var(--uui-type-small-size);
         ${props.inlineStyles}">
-        <uui-tab label="content">
-          <uui-icon slot="icon" name="document"></uui-icon>
-          Content
-        </uui-tab>
-        <uui-tab active label="packages">
-          <uui-icon slot="icon" name="settings"></uui-icon>
-          Packages
-        </uui-tab>
-        <uui-tab label="media">
-          <uui-icon slot="icon" name="picture"></uui-icon>
-          Media
-        </uui-tab>
-      </uui-tab-group>
-    </div>
-  </uui-icon-registry-essential>
-`;
-FlexLayout.parameters = {
+          <uui-tab label="content">
+            <uui-icon slot="icon" name="document"></uui-icon>
+            Content
+          </uui-tab>
+          <uui-tab active label="packages">
+            <uui-icon slot="icon" name="settings"></uui-icon>
+            Packages
+          </uui-tab>
+          <uui-tab label="media">
+            <uui-icon slot="icon" name="picture"></uui-icon>
+            Media
+          </uui-tab>
+        </uui-tab-group>
+      </div>
+    </uui-icon-registry-essential>
+  `;
+};
+Async.parameters = {
   docs: {
     source: {
       code: `
@@ -279,3 +290,81 @@ FlexLayout.parameters = {
     },
   },
 };
+
+export const CenterAlign: Story = props => html`
+  <h3>Tabs implemented into Flex-box scenario</h3>
+  <p>Here the tab group is center aligned in a flex-box container.</p>
+  <uui-icon-registry-essential>
+    <div style="display: flex;">
+      <uui-tab-group
+        dropdown-direction="horizontal"
+        style="
+          margin: auto;
+        --uui-tab-group-gap: 25px;
+        font-size: var(--uui-type-small-size);
+        ${props.inlineStyles}">
+        <uui-tab label="content">Content</uui-tab>
+        <uui-tab active label="packages">Packages</uui-tab>
+        <uui-tab label="media">Media</uui-tab>
+        <uui-tab label="settings">Settings</uui-tab>
+        <uui-tab label="translations">Translations</uui-tab>
+      </uui-tab-group>
+    </div>
+  </uui-icon-registry-essential>
+`;
+CenterAlign.parameters = {
+  docs: {
+    source: {
+      code: `
+      <div style="display: flex">
+        <uui-tab-group style="margin: auto">
+          <uui-tab label="content">Content</uui-tab>
+          <uui-tab active label="packages">Packages</uui-tab>
+          <uui-tab label="media">Media</uui-tab>
+          <uui-tab label="settings">Settings</uui-tab>
+          <uui-tab label="translations">Translations</uui-tab>
+          </uui-tab-group>
+      </div>
+      `,
+    },
+  },
+};
+
+export const RightAlign: Story = props => html`
+  <h3>Tabs implemented into Flex-box scenario</h3>
+  <p>Here the tab group is right aligned in a flex-box container.</p>
+  <uui-icon-registry-essential>
+    <div style="display: flex;">
+      <uui-tab-group
+        dropdown-direction="horizontal"
+        style="
+          margin-left: auto;
+        --uui-tab-group-gap: 25px;
+        font-size: var(--uui-type-small-size);
+        ${props.inlineStyles}">
+        <uui-tab label="content">Content</uui-tab>
+        <uui-tab active label="packages">Packages</uui-tab>
+        <uui-tab label="media">Media</uui-tab>
+        <uui-tab label="settings">Settings</uui-tab>
+        <uui-tab label="translations">Translations</uui-tab>
+      </uui-tab-group>
+    </div>
+  </uui-icon-registry-essential>
+`;
+RightAlign.parameters = {
+  docs: {
+    source: {
+      code: `
+      <div style="display: flex">
+        <uui-tab-group style="margin: auto">
+          <uui-tab label="content">Content</uui-tab>
+          <uui-tab active label="packages">Packages</uui-tab>
+          <uui-tab label="media">Media</uui-tab>
+          <uui-tab label="settings">Settings</uui-tab>
+          <uui-tab label="translations">Translations</uui-tab>
+          </uui-tab-group>
+      </div>
+      `,
+    },
+  },
+};