From 18d4975695079281a3703b7a78c57cc91b7fc234 Mon Sep 17 00:00:00 2001 From: Nikki Gonzales <38495263+nikkithelegendarypokemonster@users.noreply.github.com> Date: Thu, 7 Nov 2024 00:49:43 +0800 Subject: [PATCH] TabPanel: fix kbn after runtime loop activation and swipe (#28303) Co-authored-by: ksercs --- .../js/__internal/ui/tab_panel/m_tab_panel.ts | 1 + .../DevExpress.ui.widgets/tabPanel.tests.js | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+) 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 index bbafc59168f3..42ed06c6f675 100644 --- 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 index 307d15821a62..eddb25133241 100644 --- 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({