From 28ec86e36307c4cd281d810656b62d4dbe789cc2 Mon Sep 17 00:00:00 2001
From: AlexanderMoiseev <moiseevalexandr1@gmail.com>
Date: Thu, 14 Sep 2023 10:22:25 +0400
Subject: [PATCH] set selected index by default

---
 JSDemos/Demos/Tabs/Overview/Angular/app/app.component.html | 3 +++
 JSDemos/Demos/Tabs/Overview/React/App.js                   | 3 +++
 JSDemos/Demos/Tabs/Overview/Vue/App.vue                    | 5 ++++-
 JSDemos/Demos/Tabs/Overview/jQuery/index.js                | 3 +++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/JSDemos/Demos/Tabs/Overview/Angular/app/app.component.html b/JSDemos/Demos/Tabs/Overview/Angular/app/app.component.html
index 3c222e8734f..bea0d3080b1 100644
--- a/JSDemos/Demos/Tabs/Overview/Angular/app/app.component.html
+++ b/JSDemos/Demos/Tabs/Overview/Angular/app/app.component.html
@@ -4,6 +4,7 @@
       <dx-tabs
         #withText
         id="withText"
+        [selectedIndex]="0"
         [dataSource]="tabsWithText"
         [scrollByContent]="false"
         [showNavButtons]="false"
@@ -13,6 +14,7 @@
       <dx-tabs
         #withIconAndText
         id="withIconAndText"
+        [selectedIndex]="0"
         [dataSource]="tabsWithIconAndText"
         [scrollByContent]="false"
         [showNavButtons]="false"
@@ -22,6 +24,7 @@
       <dx-tabs
         #withIcon
         id="withIcon"
+        [selectedIndex]="0"
         [dataSource]="tabsWithIcon"
         [scrollByContent]="false"
         [showNavButtons]="false"
diff --git a/JSDemos/Demos/Tabs/Overview/React/App.js b/JSDemos/Demos/Tabs/Overview/React/App.js
index d5f075ea6dd..6392b2b79b1 100644
--- a/JSDemos/Demos/Tabs/Overview/React/App.js
+++ b/JSDemos/Demos/Tabs/Overview/React/App.js
@@ -67,6 +67,7 @@ const App = () => {
             showNavButtons={showNavigation}
             orientation={orientation}
             stylingMode={stylingMode}
+            selectedIndex={0}
           />
         </div>
         <div className="tabs-container">
@@ -77,6 +78,7 @@ const App = () => {
             orientation={orientation}
             stylingMode={stylingMode}
             iconPosition={iconPosition}
+            selectedIndex={0}
           />
         </div>
         <div className="tabs-container">
@@ -87,6 +89,7 @@ const App = () => {
             orientation={orientation}
             stylingMode={stylingMode}
             iconPosition={iconPosition}
+            selectedIndex={0}
           />
         </div>
       </div>
diff --git a/JSDemos/Demos/Tabs/Overview/Vue/App.vue b/JSDemos/Demos/Tabs/Overview/Vue/App.vue
index 4641291d45c..61a85ee9b07 100644
--- a/JSDemos/Demos/Tabs/Overview/Vue/App.vue
+++ b/JSDemos/Demos/Tabs/Overview/Vue/App.vue
@@ -4,6 +4,7 @@
       <div class="tabs-container">
         <DxTabs
           :data-source="tabsWithText"
+          selectedIndex="0"
           @initialized="saveTabInstance1"
           id="withText"
           :scroll-by-content="false"
@@ -14,6 +15,7 @@
         <DxTabs
           :data-source="tabsWithIconAndText"
           @initialized="saveTabInstance2"
+          selectedIndex="0"
           id="withIconAndText"
           :scroll-by-content="false"
           :show-nav-buttons="false"
@@ -22,6 +24,7 @@
       <div class="tabs-container">
         <DxTabs
           :data-source="tabsWithIcon"
+          selectedIndex="0"
           @initialized="saveTabInstance3"
           id="withIcon"
           :scroll-by-content="false"
@@ -189,7 +192,7 @@ export default {
 }
 
 .dx-tab {
-  width: 120px;
+  width: 135px;
 }
 
 .tabs-container {
diff --git a/JSDemos/Demos/Tabs/Overview/jQuery/index.js b/JSDemos/Demos/Tabs/Overview/jQuery/index.js
index ddf7f8b534b..106b7ead1ae 100644
--- a/JSDemos/Demos/Tabs/Overview/jQuery/index.js
+++ b/JSDemos/Demos/Tabs/Overview/jQuery/index.js
@@ -2,17 +2,20 @@ $(() => {
   const tab1 = $('#withText').dxTabs({
     showNavButtons: false,
     dataSource: tabsText,
+    selectedIndex: 0,
   }).dxTabs('instance');
 
   const tab2 = $('#withIconAndText').dxTabs({
     showNavButtons: false,
     dataSource: tabsIconAndText,
     iconPosition: iconPositions[0],
+    selectedIndex: 0,
   }).dxTabs('instance');
 
   const tab3 = $('#withIcon').dxTabs({
     showNavButtons: false,
     dataSource: tabsIcon,
+    selectedIndex: 0,
   }).dxTabs('instance');
 
   $('#orientation').dxSelectBox({