TabPanel: Fix incorrect focus borders in Generic (T1191269)

packages/devextreme/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss

@@ -28,4 +28,14 @@
       content: none;
     }
   }
+
+  .dx-multiview-wrapper {
+    border: $generic-tabs-border;
+  }
+
+  &.dx-state-focused {
+    .dx-multiview-wrapper.dx-state-focused {
+      border-color: $tabs-focused-border-color;
+    }
+  }
 }

packages/devextreme/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss

@@ -64,12 +64,4 @@
       border-block-end: none;
     }
   }
-
-  .dx-multiview-wrapper {
-    border: $generic-tabs-border;
-
-    &.dx-state-focused {
-      border-color: $tabs-focused-border-color;
-    }
-  }
 }

packages/devextreme/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss

@@ -64,12 +64,4 @@
       border-inline-start: none;
     }
   }
-
-  .dx-multiview-wrapper {
-    border: $generic-tabs-border;
-
-    &.dx-state-focused {
-      border-color: $tabs-focused-border-color;
-    }
-  }
 }

packages/devextreme/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss

@@ -64,12 +64,4 @@
       border-inline-end: none;
     }
   }
-
-  .dx-multiview-wrapper {
-    border: $generic-tabs-border;
-
-    &.dx-state-focused {
-      border-color: $tabs-focused-border-color;
-    }
-  }
 }

packages/devextreme/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss

@@ -64,12 +64,4 @@
       border-block-start: none;
     }
   }
-
-  .dx-multiview-wrapper {
-    border: $generic-tabs-border;
-
-    &.dx-state-focused {
-      border-color: $tabs-focused-border-color;
-    }
-  }
 }

packages/devextreme/scss/widgets/generic/tabPanel/layout/tab/_base.scss

@@ -16,6 +16,10 @@
 .dx-tabpanel-tab {
   padding: $generic-tabpanel-tabs-item-padding;
 
+  &.dx-state-focused::after {
+    border-color: $tabs-border-color;
+  }
+
   &.dx-state-disabled {
     &::after {
       z-index: 3;
@@ -41,6 +45,14 @@
 
 .dx-tabpanel.dx-state-focused {
   .dx-tabpanel-tab {
+    &.dx-state-focused::after {
+      border-color: $tabs-focused-border-color;
+    }
+
+    &.dx-state-focused.dx-state-disabled::after {
+      border-color: $tabs-focused-disabled-border-color;
+    }
+
     &.dx-focused-disabled-next-tab {
       &::after {
         border-inline-end: none;

packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts

@@ -76,6 +76,47 @@ test('TabPanel borders with scrolling', async (t) => {
   return createWidget('dxTabPanel', tabPanelOptions);
 });
 
+test('TabPanel focus borders after change selectedIndex in runtime', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const tabPanel = new TabPanel('#container');
+
+  await tabPanel.option({ selectedIndex: 1 } as any);
+
+  await testScreenshot(t, takeScreenshot, 'TabPanel focus borders.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const dataSource = [
+    {
+      title: 'John Heart',
+      text: 'John Heart',
+    }, {
+      title: 'Olivia Peyton',
+      text: 'Olivia Peyton',
+    }, {
+      title: 'Robert Reagan',
+      text: 'Robert Reagan',
+    }, {
+      title: 'Greta Sims',
+      text: 'Greta Sims',
+    }, {
+      title: 'Olivia Peyton',
+      text: 'Olivia Peyton',
+    },
+  ] as Item[];
+
+  const tabPanelOptions = {
+    dataSource,
+    height: 120,
+    width: 300,
+  };
+
+  return createWidget('dxTabPanel', tabPanelOptions);
+});
+
 test('TabPanel borders without scrolling', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);