From b9a53b70aa86332b17123bf8baa9d06a09d05da1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <mark_nikolsky@outlook.com>
Date: Mon, 25 Sep 2023 16:53:05 +0400
Subject: [PATCH] Tabs: Update scrollable after change the orientation option
 in runtime

---
 packages/devextreme/js/ui/tabs.js             | 22 ++++++++-----------
 .../tests/DevExpress.ui.widgets/tabs.tests.js | 17 ++++++++++++++
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/devextreme/js/ui/tabs.js b/packages/devextreme/js/ui/tabs.js
index f8b9d9f238ae..ca88d9faa184 100644
--- a/packages/devextreme/js/ui/tabs.js
+++ b/packages/devextreme/js/ui/tabs.js
@@ -256,7 +256,7 @@ const Tabs = CollectionWidget.inherit({
                 const maxLeftOffset = getScrollLeftMax($(this.getScrollable().container()).get(0));
                 scrollable.scrollTo({ left: maxLeftOffset });
             }
-            this._updateNavButtonsVisibility();
+            this._updateNavButtonsState();
 
             this._scrollToItem(this.option('selectedItem'));
         }
@@ -397,16 +397,12 @@ const Tabs = CollectionWidget.inherit({
         return scrollableDirection;
     },
 
-    _updateScrollableDirection() {
-        const scrollable = this.getScrollable();
-
-        if(scrollable) {
-            const scrollableDirection = this._getScrollableDirection();
-
-            scrollable.option('direction', scrollableDirection);
-        } else {
-            this._renderScrolling();
+    _updateScrollable() {
+        if(this.getScrollable()) {
+            this._cleanScrolling();
         }
+
+        this._renderScrolling();
     },
 
     _renderScrollable() {
@@ -419,7 +415,7 @@ const Tabs = CollectionWidget.inherit({
             useNative: false,
             scrollByContent: this.option('scrollByContent'),
             onScroll: () => {
-                this._updateNavButtonsVisibility();
+                this._updateNavButtonsState();
             },
         });
 
@@ -452,7 +448,7 @@ const Tabs = CollectionWidget.inherit({
         this.$element().append($rightButton);
     },
 
-    _updateNavButtonsVisibility() {
+    _updateNavButtonsState() {
         const isVertical = this._isVertical();
         const scrollable = this.getScrollable();
 
@@ -647,7 +643,7 @@ const Tabs = CollectionWidget.inherit({
             case 'orientation': {
                 this._toggleOrientationClass(args.value);
                 if(!this._isServerSide()) {
-                    this._updateScrollableDirection();
+                    this._updateScrollable();
                 }
                 break;
             }
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
index 89f591981e32..45118e8dfd35 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
@@ -483,6 +483,23 @@ QUnit.module('Horizontal scrolling', () => {
         assert.ok($scrollable.find('.' + TABS_ITEM_CLASS).length, 'items wrapped into scrollable');
     });
 
+    QUnit.test('tabs should not be wrapped into scrollable after orientation runtime changing if component width more than total tabs width', function(assert) {
+        const $element = $('#scrollableTabs').dxTabs({
+            items: [{ text: 'item 1' }, { text: 'item 1' }],
+            scrollingEnabled: true,
+            orientation: 'vertical',
+            width: 500,
+            height: 50,
+        });
+        const instance = $element.dxTabs('instance');
+
+        assert.strictEqual($element.children(`.${SCROLLABLE_CLASS}`).length, 1, 'scroll is created');
+
+        instance.option({ orientation: 'horizontal' });
+
+        assert.strictEqual($element.children(`.${SCROLLABLE_CLASS}`).length, 0, 'scroll was removed');
+    });
+
     QUnit.test('tabs should be wrapped into scrollable for some disabled items', function(assert) {
         const $element = $('#scrollableTabs').dxTabs({
             items: [{ text: 'item 1' }, { text: 'item 2', disabled: true }, { text: 'item 3', disabled: true }, { text: 'item 4', disabled: true }],