fix(tab): trigger resize observer when label changes to make tab bar show scroll button correctly

packages/core/src/index.ts

@@ -62,6 +62,7 @@ export type { StyleInfo };
 export { FocusableHelper } from './utils/focusableHelper.js';
 export { matches } from './utils/matches.js';
 export { isBasicElement } from './utils/helpers.js';
+export { triggerResize } from './utils/resizeHelper.js';
 
 /**
  * Export focused key.

packages/core/src/utils/resizeHelper.ts

@@ -0,0 +1,11 @@
+/**
+ * https://github.com/juggle/resize-observer/issues/42
+ *
+ * This event ensures that ResizeObserver picks up resize events
+ * when the element is deeply nested inside shadow root.
+ * TODO: remove this workaround once ResizeObserver handles shadow root scenario
+ * @returns {void}
+ */
+export const triggerResize = (): void => {
+  window.dispatchEvent(new Event('animationiteration'));
+};

packages/elements/src/tab-bar/__demo__/index.html

@@ -131,5 +131,25 @@ <h6>Calendar</h6>
       </ef-tab-bar>
       <br>
     </demo-block>
+
+    <demo-block header="Dynamic Rendering" layout="normal" tags="dynamicRendering">
+      <ef-tab-bar>
+        <ef-tab id="dynamic">tab 1</ef-tab>
+        <ef-tab id="dynamic">tab 2</ef-tab>
+        <ef-tab id="dynamic">tab 3</ef-tab>
+        <ef-tab id="dynamic">tab 4</ef-tab>
+        <ef-tab id="dynamic">tab 5</ef-tab>
+        <ef-tab id="dynamic">tab 6</ef-tab>
+      </ef-tab-bar>
+      <br>
+    </demo-block>
+    <script>
+      setTimeout(() => {
+        const tabs = document.querySelectorAll('#dynamic');
+        tabs.forEach((tab) => {
+          tab.textContent = 'some long label';
+        });
+      }, 5000);
+    </script>
   </body>
 </html>

packages/elements/src/tab/index.ts

@@ -10,6 +10,7 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
+import { triggerResize } from '@refinitiv-ui/core';
 import { VERSION } from '../version.js';
 
 import '../icon/index.js';
@@ -132,6 +133,11 @@ export class Tab extends ControlElement {
     if (changedProperties.has('active')) {
       this.setAttribute('aria-selected', this.active ? 'true' : 'false');
     }
+
+    if (changedProperties.has('label')) {
+      // ensures that tab-bar fire resizeCallback when label changes
+      triggerResize();
+    }
   }
 
   /**
@@ -142,6 +148,8 @@ export class Tab extends ControlElement {
   private onSlotChange = (event: Event): void => {
     const slot = event.target as HTMLSlotElement;
     this.isSlotHasContent = !!slot.assignedNodes().length && isSlotEmpty(slot);
+    // ensures that tab-bar fire resizeCallback when slot changes
+    triggerResize();
   };
 
   /**