Tabs: add resize observer to reload scrollable on internal item size changes (#30168)

Author: pharret31

packages/devextreme/js/__internal/ui/tabs/tabs.ts

@@ -7,6 +7,7 @@ import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import resizeObserverSingleton from '@js/core/resize_observer';
 import { BindableTemplate } from '@js/core/templates/bindable_template';
 import { getImageContainer } from '@js/core/utils/icon';
 import { each } from '@js/core/utils/iterator';
@@ -306,6 +307,8 @@ class Tabs extends CollectionWidget<TabsProperties> {
     }
 
     this.$element().addClass(OVERFLOW_HIDDEN_CLASS);
+
+    this._attachResizeObserverSubscription();
   }
 
   _postProcessRenderItems(): void {
@@ -633,6 +636,11 @@ class Tabs extends CollectionWidget<TabsProperties> {
     }
   }
 
+  _attachResizeObserverSubscription(): void {
+    resizeObserverSingleton.unobserve(this.$element().get(0));
+    resizeObserverSingleton.observe(this.$element().get(0), () => { this._dimensionChanged(); });
+  }
+
   _dimensionChanged(): void {
     this._renderScrolling();
   }
@@ -657,6 +665,7 @@ class Tabs extends CollectionWidget<TabsProperties> {
   }
 
   _clean(): void {
+    resizeObserverSingleton.unobserve(this.$element().get(0));
     this._cleanScrolling();
     super._clean();
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js

@@ -11,6 +11,9 @@ import pointerMock from '../../helpers/pointerMock.js';
 import { TestAsyncTabsWrapper, TestTabsWrapper } from '../../helpers/wrappers/tabsWrappers.js';
 import { getScrollLeftMax } from '__internal/ui/scroll_view/utils/get_scroll_left_max';
 import keyboardMock from '../../helpers/keyboardMock.js';
+import devices from '__internal/core/m_devices';
+import { compare as compareVersions } from 'core/utils/version';
+import resizeObserverSingleton from 'core/resize_observer';
 import {
     TABS_ITEM_CLASS,
     TABS_ITEM_SELECTED_CLASS,
@@ -405,6 +408,18 @@ QUnit.module('General', () => {
         assert.strictEqual($element.find(`.${TABS_NAV_BUTTON_CLASS}`).length, 2, 'nav buttons was rendered');
         assert.strictEqual($element.find(`.${TABS_SCROLLABLE_CLASS}`).length, 1, 'scrollable was rendered');
     });
+
+    QUnit.test('resize observer should be attached to the tabs', function(assert) {
+        const observeSpy = sinon.spy(resizeObserverSingleton, 'observe');
+
+        $('#tabs').dxTabs({
+            items: [{ text: 'item 1' }],
+        });
+
+        assert.strictEqual(observeSpy.callCount, 1, 'resize observer is connected');
+
+        observeSpy.restore();
+    });
 });
 
 QUnit.module('Tab select action', () => {

packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.width.tests.js

@@ -114,14 +114,27 @@ QUnit.module('Width', () => {
                     break;
                 case 'container':
                     this.setContainerWidth(width);
-                    this.tabs.repaint();
                     break;
                 case 'resizeBrowser':
                     this.setContainerWidth(width);
                     triggerResizeEvent(this.$container);
                     break;
             }
         }
+
+        delayedCheckIfRequired(fn) {
+            const done = this.assert.async();
+            const resizeTimeout = 40;
+            if(this.setWidthApproach === 'container') {
+                setTimeout(() => {
+                    fn();
+                    done();
+                }, resizeTimeout);
+            } else {
+                fn();
+                done();
+            }
+        }
     }
 
     [true, false, undefined].forEach((scrollingEnabled) => {
@@ -130,44 +143,44 @@ QUnit.module('Width', () => {
 
             QUnit.test('Show fixed tabs, resize to show stretched tabs' + config, function(assert) {
                 const helper = new TabsWidthTestHelper(assert, scrollingEnabled, setWidthApproach);
-                helper.createFixedTabs(400);
+                helper.createFixedTabs();
                 helper.setWidth(200);
-                helper.checkStretchedTabs();
+                helper.delayedCheckIfRequired(() => helper.checkStretchedTabs());
             });
 
             QUnit.test('Show fixed tabs, resize to show navigation buttons' + config, function(assert) {
                 const helper = new TabsWidthTestHelper(assert, scrollingEnabled, setWidthApproach);
-                helper.createFixedTabs(400);
+                helper.createFixedTabs();
                 helper.setWidth(100);
-                helper.checkNavigationButtonsTabs();
+                helper.delayedCheckIfRequired(() => helper.checkNavigationButtonsTabs());
             });
 
             QUnit.test('Show stretched tabs, resize to show navigation buttons' + config, function(assert) {
                 const helper = new TabsWidthTestHelper(assert, scrollingEnabled, setWidthApproach);
                 helper.createStretchedTabs();
                 helper.setWidth(100);
-                helper.checkNavigationButtonsTabs();
+                helper.delayedCheckIfRequired(() => helper.checkNavigationButtonsTabs());
             });
 
             QUnit.test('Show stretched tabs, resize to show fixed tabs' + config, function(assert) {
                 const helper = new TabsWidthTestHelper(assert, scrollingEnabled, setWidthApproach);
                 helper.createStretchedTabs();
                 helper.setWidth(400);
-                helper.checkFixedTabs();
+                helper.delayedCheckIfRequired(() => helper.checkFixedTabs());
             });
 
             QUnit.test('Show navigation buttons, resize to show stretched tabs' + config, function(assert) {
                 const helper = new TabsWidthTestHelper(assert, scrollingEnabled, setWidthApproach);
                 helper.createNavigationButtonsTabs();
                 helper.setWidth(200);
-                helper.checkStretchedTabs();
+                helper.delayedCheckIfRequired(() => helper.checkStretchedTabs());
             });
 
             QUnit.test('Show navigation buttons, resize to show fixed tabs' + config, function(assert) {
                 const helper = new TabsWidthTestHelper(assert, scrollingEnabled, setWidthApproach);
                 helper.createFixedTabs();
                 helper.setWidth(400);
-                helper.checkFixedTabs();
+                helper.delayedCheckIfRequired(() => helper.checkFixedTabs());
             });
         });
     });