TabPanel: fix kbn after runtime loop activation and swipe (#28303)

Co-authored-by: ksercs <[email protected]>
DevExpress · Nov 6, 2024 · 18d4975 · 18d4975
1 parent 1b74f7f
commit 18d4975
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts b/packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts
@@ -517,6 +517,7 @@ const TabPanel = MultiView.inherit({
         break;
       case 'loop':
         this._setTabsOption('loopItemFocus', value);
+        this.callBase(args);
         break;
       case 'badgeExpr':
         this._invalidate();

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js
@@ -1121,6 +1121,27 @@ QUnit.module('keyboard navigation', {
         assert.equal(tabsFocusedIndex, $(this.instance.option('focusedElement')).index(), 'multiView focused element is equal tabs focused element');
     });
 
+    QUnit.test('looping should work on keyboard navigation after loop runtime change to true and swipe', function(assert) {
+        if(devices.real().deviceType !== 'desktop') {
+            assert.ok(true, 'no kbn on mobile devices');
+            return;
+        }
+
+        this.instance.option({
+            items: [1, 2, 3],
+            loop: false,
+            swipeEnabled: true,
+        });
+        this.instance.option('loop', true);
+        const pointer = pointerMock(this.$element);
+        const keyDownEvent = $.Event('keydown', { key: 'ArrowRight' });
+
+        pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1);
+        this.$element.trigger(keyDownEvent).trigger(keyDownEvent);
+
+        assert.strictEqual(this.instance.option('selectedIndex'), 0, 'loop comes back to first element');
+    });
+
     if(devices.current().deviceType === 'desktop') {
         const createWidget = ($element) => {
             const widget = $element.dxTabPanel({