Tabs: Set focusedElement when selectedIndex, selectedItems, selectedI…

…tems was changed (T1193394)
DevExpress · Nov 14, 2023 · 89b6ef6 · 89b6ef6
1 parent a441ba7
commit 89b6ef6
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 40 deletions.
diff --git a/packages/devextreme/js/ui/tabs.js b/packages/devextreme/js/ui/tabs.js
@@ -681,6 +681,17 @@ const Tabs = CollectionWidget.inherit({
         this._toggleFocusedDisabledPrevClass(currentIndex, shouldPrevClassBeSetted);
     },
 
+    _updateFocusedElement() {
+        const { focusStateEnabled, selectedIndex } = this.option();
+        const itemElements = this._itemElements();
+
+        if(focusStateEnabled && itemElements.length) {
+            const selectedItem = itemElements.get(selectedIndex);
+
+            this.option({ focusedElement: selectedItem });
+        }
+    },
+
     _optionChanged: function(args) {
         switch(args.name) {
             case 'useInkRipple':
@@ -742,6 +753,12 @@ const Tabs = CollectionWidget.inherit({
                 this._toggleIndicatorPositionClass(args.value);
                 break;
             }
+            case 'selectedIndex':
+            case 'selectedItem':
+            case 'selectedItems':
+                this.callBase(args);
+                this._updateFocusedElement();
+                break;
             default:
                 this.callBase(args);
         }

diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss
@@ -44,10 +44,6 @@
     }
   }
 
-  &.dx-state-focused {
-    background-color: $tabs-focused-tab-bg-color;
-  }
-
   &.dx-state-disabled {
     color: $tabs-tab-disabled-color;
 
@@ -96,6 +92,12 @@
   }
 }
 
+.dx-tabs.dx-state-focused {
+  .dx-tab.dx-state-focused {
+    background-color: $tabs-focused-tab-bg-color;
+  }
+}
+
 .dx-tabs-icon-position-start .dx-tab-text::after {
   text-align: end;
 }

diff --git a/packages/devextreme/scss/widgets/generic/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/generic/tabs/layout/tab/_base.scss
@@ -74,15 +74,6 @@
     }
   }
 
-  &.dx-state-focused {
-    @include dx-tabs-border-mixin(
-      $generic-tabs-border-focused-top,
-      $generic-tabs-border-focused-right,
-      $generic-tabs-border-focused-bottom,
-      $generic-tabs-border-focused-left,
-    );
-  }
-
   &.dx-state-disabled .dx-tab-content {
     opacity: 0.32;
   }
@@ -91,13 +82,6 @@
     &::after {
       z-index: 2;
     }
-
-    @include dx-tabs-border-mixin(
-      $generic-tabs-border-focused-disabled-top,
-      $generic-tabs-border-focused-disabled-right,
-      $generic-tabs-border-focused-disabled-bottom,
-      $generic-tabs-border-focused-disabled-left,
-    );
   }
 
   .dx-tab-text {
@@ -120,6 +104,24 @@
 
 .dx-tabs.dx-state-focused {
   .dx-tab {
+    &.dx-state-focused {
+      @include dx-tabs-border-mixin(
+        $generic-tabs-border-focused-top,
+        $generic-tabs-border-focused-right,
+        $generic-tabs-border-focused-bottom,
+        $generic-tabs-border-focused-left,
+      );
+    }
+
+    &.dx-state-focused.dx-state-disabled {
+      @include dx-tabs-border-mixin(
+        $generic-tabs-border-focused-disabled-top,
+        $generic-tabs-border-focused-disabled-right,
+        $generic-tabs-border-focused-disabled-bottom,
+        $generic-tabs-border-focused-disabled-left,
+      );
+    }
+
     &.dx-focused-disabled-next-tab {
       &::after {
         border-inline-end: none;

diff --git a/packages/devextreme/scss/widgets/generic/tabs/layout/tab/_vertical.scss b/packages/devextreme/scss/widgets/generic/tabs/layout/tab/_vertical.scss
@@ -47,15 +47,6 @@
       );
     }
 
-    &.dx-state-focused {
-      @include dx-tabs-border-mixin(
-        $generic-tabs-vertical-border-focused-top,
-        $generic-tabs-vertical-border-focused-right,
-        $generic-tabs-vertical-border-focused-bottom,
-        $generic-tabs-vertical-border-focused-left,
-      );
-    }
-
     &.dx-state-focused.dx-state-disabled {
       @include dx-tabs-border-mixin(
         $generic-tabs-vertical-border-focused-disabled-top,
@@ -68,6 +59,15 @@
 
   &.dx-state-focused {
     .dx-tab {
+      &.dx-state-focused {
+        @include dx-tabs-border-mixin(
+          $generic-tabs-vertical-border-focused-top,
+          $generic-tabs-vertical-border-focused-right,
+          $generic-tabs-vertical-border-focused-bottom,
+          $generic-tabs-vertical-border-focused-left,
+        );
+      }
+
       &.dx-focused-disabled-next-tab {
         &::after {
           border-inline-end: $generic-tabs-border;

diff --git a/packages/devextreme/scss/widgets/material/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/material/tabs/layout/tab/_base.scss
@@ -35,11 +35,6 @@
     }
   }
 
-  &.dx-state-focused {
-    background-color: $tabs-focused-tab-bg-color;
-  }
-
-
   &.dx-state-disabled {
     color: $tabs-tab-disabled-color;
 
@@ -66,3 +61,9 @@
     @include dx-icon-sizing($material-tabs-icon-size);
   }
 }
+
+.dx-tabs.dx-state-focused {
+  .dx-tab.dx-state-focused {
+    background-color: $tabs-focused-tab-bg-color;
+  }
+}
diff --git a/...ditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light).png b/...ditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light).png
diff --git a/...alogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light-compact).png b/...alogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light-compact).png
diff --git a/...ts/navigation/tabPanel/etalons/TabPanel focus borders (material-blue-light).png b/...ts/navigation/tabPanel/etalons/TabPanel focus borders (material-blue-light).png
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js
@@ -620,10 +620,10 @@ QUnit.module('keyboard navigation', {
 
         const multiViewFocusedIndex = $(this.instance.option('focusedElement')).index();
 
-        assert.equal(isRenderer(this.instance.option('focusedElement')), !!config().useJQuery, 'focusedElement is correct');
-        assert.equal(isRenderer(this.tabs.option('focusedElement')), !!config().useJQuery, 'focusedElement is correct');
-        assert.equal(multiViewFocusedIndex, 1, 'second multiView element has been focused');
-        assert.equal(multiViewFocusedIndex, $(this.tabs.option('focusedElement')).index(), 'tabs focused element is equal multiView focused element');
+        assert.strictEqual(isRenderer(this.instance.option('focusedElement')), !!config().useJQuery, 'focusedElement is correct');
+        assert.strictEqual(isRenderer(this.tabs.option('focusedElement')), false, 'focusedElement is correct');
+        assert.strictEqual(multiViewFocusedIndex, 1, 'second multiView element has been focused');
+        assert.strictEqual(multiViewFocusedIndex, $(this.tabs.option('focusedElement')).index(), 'tabs focused element is equal multiView focused element');
     });
 
     QUnit.test('click on available tab removed specific tab classes if previous item is disabled', function(assert) {

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
@@ -504,6 +504,91 @@ QUnit.module('Tab select action', () => {
 
         assert.equal(instance.option('selectedItems').length, 2, 'selected two items in multiple mode');
     });
+
+    QUnit.test('focusedElement must be changed after changing the selectedIndex', function(assert) {
+        assert.expect(2);
+
+        const $tabs = $('#tabs').dxTabs({
+            items: [
+                { text: '0' },
+                { text: '1' },
+                { text: '2' },
+            ],
+            focusStateEnabled: true,
+        });
+        const tabs = $tabs.dxTabs('instance');
+
+        const tabsItemFirst = $tabs.find(`.${TABS_ITEM_CLASS}`).eq(0);
+
+        tabsItemFirst.trigger('dxclick');
+
+        const $focusedElementFirst = tabs.option('focusedElement');
+
+        assert.strictEqual($focusedElementFirst, tabsItemFirst[0]);
+
+        tabs.option({ selectedIndex: 1 });
+
+        const tabItemSecond = $tabs.find(`.${TABS_ITEM_CLASS}`).eq(1);
+        const $focusedElementSecond = tabs.option('focusedElement');
+
+        assert.strictEqual($focusedElementSecond, tabItemSecond[0]);
+    });
+
+    QUnit.test('focusedElement must be changed after changing the selectedItem', function(assert) {
+        assert.expect(2);
+
+        const $tabs = $('#tabs').dxTabs({
+            items: [
+                { text: '0' },
+                { text: '1' },
+                { text: '2' },
+            ],
+            focusStateEnabled: true,
+        });
+        const tabs = $tabs.dxTabs('instance');
+
+        const tabsItemFirst = $tabs.find(`.${TABS_ITEM_CLASS}`).eq(0);
+
+        tabsItemFirst.trigger('dxclick');
+
+        const $focusedElementFirst = tabs.option('focusedElement');
+
+        assert.strictEqual($focusedElementFirst, tabsItemFirst[0]);
+
+        tabs.option({ selectedItem: tabs.option('items[1]') });
+
+        const tabItemSecond = $tabs.find(`.${TABS_ITEM_CLASS}`).eq(1);
+        const $focusedElementSecond = tabs.option('focusedElement');
+
+        assert.strictEqual($focusedElementSecond, tabItemSecond[0]);
+    });
+
+    QUnit.test('focusedElement must be changed after changing the selectedItems', function(assert) {
+        assert.expect(2);
+
+        const items = [
+            { text: '0' },
+            { text: '1' },
+            { text: '2' },
+        ];
+        const $tabs = $('#tabs').dxTabs({ items, focusStateEnabled: true });
+        const tabs = $tabs.dxTabs('instance');
+
+        const tabItemFirst = $tabs.find(`.${TABS_ITEM_CLASS}`).eq(0);
+
+        tabItemFirst.trigger('dxclick');
+
+        const $focusedElementFirst = tabs.option('focusedElement');
+
+        assert.strictEqual($focusedElementFirst, tabItemFirst[0]);
+
+        tabs.option({ selectedItems: [items[1], items[2]] });
+
+        const tabItemSecond = $tabs.find(`.${TABS_ITEM_CLASS}`).eq(1);
+        const $focusedElementSecond = tabs.option('focusedElement');
+
+        assert.strictEqual($focusedElementSecond, tabItemSecond[0]);
+    });
 });
 
 QUnit.module('Horizontal scrolling', () => {
@@ -753,12 +838,13 @@ QUnit.module('Horizontal scrolling', () => {
     });
 
     QUnit.test('selected item should be visible after selectedIndex was changed', function(assert) {
-        assert.expect(1);
+        assert.expect(2);
         const $element = $('#scrollableTabs').dxTabs({
             items: [{ text: 'item 1' }, { text: 'item 1' }, { text: 'item 1' }, { text: 'item 1' }],
+            width: 100,
             selectedIndex: 0,
             scrollingEnabled: true,
-            width: 100
+            focusStateEnabled: true,
         });
         const instance = $element.dxTabs('instance');
         const scrollable = $element.find('.' + SCROLLABLE_CLASS).dxScrollable('instance');