TabPanel: Added focus to the selected tab after initialization (T1277409) (#29998)

Cherry-pick of #29989

Author: pharret31

packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts

@@ -225,6 +225,15 @@ const TabPanel = MultiView.inherit({
       .addClass(TABPANEL_CONTAINER_CLASS)
       .appendTo($element);
     this._$container.append(this._$wrapper);
+
+    const { focusStateEnabled, selectedIndex } = this.option();
+    if (focusStateEnabled && isDefined(selectedIndex)) {
+      const selectedItem = this._tabs.itemElements().get(selectedIndex);
+
+      if (selectedItem) {
+        this._tabs.option({ focusedElement: selectedItem });
+      }
+    }
   },
 
   _refreshActiveDescendant() {

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

@@ -604,6 +604,26 @@ QUnit.module('focus policy', {
 
         assert.strictEqual($tabPanel.find(`.${MULTIVIEW_WRAPPER_CLASS}`).hasClass(FOCUS_STATE_CLASS), false);
     });
+
+    QUnit.test('first tab should be focused after initialization (T1277409)', function(assert) {
+        const items = Array.from({ length: 20 }, (_, index) => ({
+            title: `Tab ${index + 1}`,
+            text: `Content ${index + 1}`
+        }));
+
+        const $tabPanel = $('#tabPanel').dxTabPanel({
+            items,
+            focusStateEnabled: true,
+        });
+
+        const $tabs = $tabPanel.find(toSelector(TABPANEL_TABS_ITEM_CLASS));
+        const tabsInstance = $tabPanel.find(toSelector(TABS_CLASS)).dxTabs('instance');
+        const $firstTab = $tabs.first();
+
+        assert.strictEqual($tabs.filter(`.${FOCUS_STATE_CLASS}`).length, 1, 'only one tab is focused');
+        assert.strictEqual($firstTab.hasClass(FOCUS_STATE_CLASS), true, 'first tab is focused');
+        assert.strictEqual($(tabsInstance.option('focusedElement')).get(0), $firstTab.get(0), 'focusedElement is correct');
+    });
 });
 
 QUnit.module('keyboard navigation', {