MultiView: Fix search traversal of visible items during loop (#28186)

DevExpress · Oct 18, 2024 · 50a1a60 · 50a1a60
1 parent cab8170
commit 50a1a60
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/packages/devextreme/js/__internal/ui/m_multi_view.ts b/packages/devextreme/js/__internal/ui/m_multi_view.ts
@@ -112,8 +112,9 @@ const MultiView = CollectionWidget.inherit({
 
     const step = direction > 0 ? -1 : 1;
     const lastNotLoopedIndex = step === -1 ? 0 : count - 1;
+
     while (!this._isItemVisible(index) && (loop || index !== lastNotLoopedIndex)) {
-      index = (index + step) % count;
+      index = (index + step + count) % count;
     }
 
     return index;

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js
@@ -819,6 +819,56 @@ QUnit.module('loop', {
         delete this.animationStartAction;
     }
 }, () => {
+    QUnit.test('if first item is invisible and swiped right last item should be selected', function(assert) {
+        const $multiView = $('#multiView').dxMultiView({
+            items: [
+                { text: '1', visible: false },
+                { text: '2', visible: true },
+                { text: '3', visible: true }
+            ],
+            loop: true,
+            selectedIndex: 1
+        });
+
+        const instance = $multiView.dxMultiView('instance');
+        const $firstItem = $multiView.find(`.${MULTIVIEW_ITEM_CLASS}`).eq(1);
+        const $lastItem = $multiView.find(`.${MULTIVIEW_ITEM_CLASS}`).eq(2);
+        const pointer = pointerMock($multiView);
+
+        this.animationStartAction = function() {
+            assert.equal(position($firstItem), 0, 'item "2" is positioned correctly as the first visible item.');
+            assert.equal(position($lastItem), -800, 'item "3" is positioned correctly as the last visible item.');
+        };
+
+        pointer.start().swipeStart().swipe(0.1).swipeEnd(1);
+        assert.strictEqual(instance.option('selectedIndex'), 2, 'item "3" is selected');
+    });
+
+    QUnit.test('if last item is invisible and swiped left first item should be selected', function(assert) {
+        const $multiView = $('#multiView').dxMultiView({
+            items: [
+                { text: '1', visible: true },
+                { text: '2', visible: true },
+                { text: '3', visible: false }
+            ],
+            loop: true,
+            selectedIndex: 1
+        });
+
+        const instance = $multiView.dxMultiView('instance');
+        const $firstItem = $multiView.find(`.${MULTIVIEW_ITEM_CLASS}`).eq(0);
+        const $lastItem = $multiView.find(`.${MULTIVIEW_ITEM_CLASS}`).eq(1);
+        const pointer = pointerMock($multiView);
+
+        this.animationStartAction = function() {
+            assert.equal(position($firstItem), 800, 'item "1" is positioned correctly as the first visible item.');
+            assert.equal(position($lastItem), 0, 'item "2" is positioned correctly as the last visible item.');
+        };
+
+        pointer.start().swipeStart().swipe(-0.1).swipeEnd(-1);
+        assert.strictEqual(instance.option('selectedIndex'), 0, 'item "1" is selected');
+    });
+
     QUnit.test('when only one item is visible, swipe action does not move the current visible item', function(assert) {
         const $multiView = $('#multiView').dxMultiView({
             items: [