fix(cdk, platform): platform icon tab bar does not detect overflow

[MariaIDineva]

Related Issue(s)

closes #13962

Description

Problem

The OverflowListDirective only recalculated overflow on ResizeObserver and window.resize events. When the list content changed dynamically (items added/removed, or text labels updated — e.g. a language switch), the directive did not detect that items now overflow the container. Users would see items spilling out of bounds until they manually resized the window.

Root Cause

1. No reaction to content changes — the directive never subscribed to ContentChildren.changes (item count changes) and had no mechanism to detect text content mutations (label updates).

Additional problems

1. Flicker on recalculation — the original calculateOverflow() used setTimeout(0) (a macrotask), which runs after the browser paints, causing a visible flash of overflowed items before they move into the "more" popover.
2. Memory leak — the fromEvent(window, 'resize') subscription was never cleaned up on destroy.

Changes

overflow-list.directive.ts

• Added MutationObserver watching childList + characterData (with subtree: true) to detect both structural changes (items added/removed via @for) and text content changes (label updates, i18n switches). Attributes are intentionally excluded to avoid infinite loops from our own measurement toggles (hidden, style.display).
• Replaced setTimeout(0) with Promise.resolve().then() — a microtask that runs after DOM mutations but before the browser paints, eliminating the visible flicker.
• Added coalescing via _recalcScheduled flag to prevent redundant recalculations when multiple triggers fire in the same task.
• Added takeUntilDestroyed to the window.resize subscription and DestroyRef.onDestroy cleanup for both ResizeObserver and MutationObserver.
• Removed dead code in calculateOverflow() (local totalWidth/overflowCount variables were computed but never used).

overflow-list.directive.spec.ts

• Fixed silently-passing tests: assertions inside fixture.whenStable().then() within fakeAsync were swallowed by the Promise chain and never actually evaluated. Moved assertions to run synchronously after flush().
• Replaced fragile HTMLElement.prototype property mocks (offsetWidth, offsetLeft, clientWidth) — which didn't produce meaningful layout in JSDOM — with jest.spyOn(overflowListDir, 'getAmountOfExtraItems') to test the event wiring without depending on JSDOM layout.
• Fixed Array(100).fill(0) → Array.from({ length: 10 }, (_, i) => i) to eliminate Angular NG0955 duplicate track-key warnings.
• Added unit tests to cover the new logic around MutationObserver.

Examples

• Added a separate example on the platform/icon-tab-bar page called Dynamic Overflow to test and depict the issue and its fix.
• The example allows:
  • adding new tabs dynamically so that More appears when needed
  • switching to longer names of the tabs so that visible tabs are recalculated dynamically and the overflowing ones are inserted into the overflow.

Screenshots

Before:

icon-tab-bar-overflow-bug.mov

After:

icon-tab-bar-dynamic-overflow.mov

[netlify]

✅ Deploy Preview for fundamental-ngx ready!

Name	Link
🔨 Latest commit	dc32630
🔍 Latest deploy log	https://app.netlify.com/projects/fundamental-ngx/deploys/69b277c9b5d5fb00086a2ea6
😎 Deploy Preview	https://deploy-preview-13964--fundamental-ngx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.