List: fix kbn scrolling in simulated strategy (T1298074) (DevExpress#30384) (DevExpress#30389)

Author: anna-shakhova

packages/devextreme/js/__internal/ui/list/m_list.base.ts

@@ -80,6 +80,8 @@ export interface ListBaseProperties extends Properties<Item> {
   focusedElement?: dxElementWrapper;
 }
 
+type Direction = 'prev' | 'next';
+
 export class ListBase extends CollectionWidget<ListBaseProperties> {
   static ItemClass = ListItem;
 
@@ -120,78 +122,88 @@ export class ListBase extends CollectionWidget<ListBaseProperties> {
   _selectionChangeEventInstance?: any;
 
   _supportedKeys(): Record<string, (e: KeyboardEvent, options?: Record<string, unknown>) => void> {
-    const that = this;
+    return {
+      ...super._supportedKeys(),
+      leftArrow: noop,
+      rightArrow: noop,
+      pageUp(e) {
+        this._moveFocusPerPage(e, 'prev');
+      },
+      pageDown(e) {
+        this._moveFocusPerPage(e, 'next');
+      },
+    };
+  }
 
-    const moveFocusPerPage = function (direction) {
-      let $item = getEdgeVisibleItem(direction);
+  _moveFocusPerPage(e: KeyboardEvent, direction: Direction): void {
+    if (this._isLastItemFocused(direction)) {
+      return;
+    }
 
-      const { focusedElement } = that.option();
-      // @ts-expect-error ts-error
-      const isFocusedItem = $item.is(focusedElement);
+    e.preventDefault();
+    e.stopPropagation();
 
-      if (isFocusedItem) {
-        scrollListTo($item, direction);
-        $item = getEdgeVisibleItem(direction);
-      }
+    let $item = this._getEdgeVisibleItem(direction);
+    const { focusedElement } = this.option();
 
-      that.option('focusedElement', getPublicElement($item));
-      that.scrollToItem($item);
-    };
+    const isFocusedItem = $item.is($(focusedElement));
 
-    function getEdgeVisibleItem(direction) {
-      const scrollTop = that.scrollTop();
-      const containerHeight = getHeight(that.$element());
+    if (isFocusedItem) {
+      this.scrollTo(this._getItemLocation($item, direction));
+      $item = this._getEdgeVisibleItem(direction);
+    }
 
-      const { focusedElement } = that.option();
+    this.option('focusedElement', getPublicElement($item));
+    this.scrollToItem($item);
+  }
 
-      let $item = $(focusedElement);
-      let isItemVisible = true;
+  _isLastItemFocused(direction: Direction): boolean {
+    const lastItemInDirection = direction === 'prev' ? this._itemElements().first() : this._itemElements().last();
+    const { focusedElement } = this.option();
 
-      if (!$item.length) {
-        return $();
-      }
+    return lastItemInDirection.is($(focusedElement));
+  }
 
-      while (isItemVisible) {
-        const $nextItem = $item[direction]();
+  _getEdgeVisibleItem(direction: Direction): dxElementWrapper {
+    const scrollTop = this.scrollTop();
+    const containerHeight = getHeight(this.$element());
 
-        if (!$nextItem.length) {
-          break;
-        }
+    const { focusedElement } = this.option();
 
-        const nextItemLocation = $nextItem.position().top + getOuterHeight($nextItem) / 2;
-        isItemVisible = nextItemLocation < containerHeight + scrollTop && nextItemLocation > scrollTop;
+    let $item = $(focusedElement);
+    let isItemVisible = true;
 
-        if (isItemVisible) {
-          $item = $nextItem;
-        }
-      }
-
-      return $item;
+    if (!$item.length) {
+      return $();
     }
 
-    function scrollListTo($item, direction) {
-      let resultPosition = $item.position().top;
+    while (isItemVisible) {
+      const $nextItem = $item[direction]();
 
-      if (direction === 'prev') {
-        resultPosition = $item.position().top - getHeight(that.$element()) + getOuterHeight($item);
+      if (!$nextItem.length) {
+        break;
       }
 
-      that.scrollTo(resultPosition);
+      const nextItemLocation = ($nextItem.position()?.top ?? 0) + getOuterHeight($nextItem) / 2;
+      isItemVisible = nextItemLocation < containerHeight + scrollTop && nextItemLocation > scrollTop;
+
+      if (isItemVisible) {
+        $item = $nextItem;
+      }
     }
 
-    return {
-      ...super._supportedKeys(),
-      leftArrow: noop,
-      rightArrow: noop,
-      pageUp() {
-        moveFocusPerPage('prev');
-        return false;
-      },
-      pageDown() {
-        moveFocusPerPage('next');
-        return false;
-      },
-    };
+    return $item;
+  }
+
+  _getItemLocation($item: dxElementWrapper, direction: Direction): number {
+    if (direction === 'prev') {
+      // @ts-expect-error ts-error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return $item.position().top - getHeight(this.$element()) + getOuterHeight($item);
+    }
+
+    // @ts-expect-error ts-error
+    return $item.position().top;
   }
 
   _getDefaultOptions(): ListBaseProperties {

packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js

@@ -4335,6 +4335,41 @@ QUnit.module('keyboard navigation', {
         assert.ok(secondItemIsFocused, 'focused item change to last visible item on new page');
     });
 
+    ['pageUp', 'pageDown'].forEach((key) => {
+        const moveDown = key === 'pageDown';
+
+        [true, false].forEach((useNativeScrolling) => {
+            QUnit.test(`on list scroll with ${key} pressed original event prevented and propagation stopped if not ${moveDown ? 'last' : 'first'} item was focused, useNativeScrolling=${useNativeScrolling} (T1298074)`, function(assert) {
+                assert.expect(4);
+
+                const $list = $('#list').dxList({
+                    useNativeScrolling,
+                    focusStateEnabled: true,
+                    items: [0, 1, 2, 3, 4],
+                });
+
+                const instance = $list.dxList('instance');
+                const $items = $list.find(`.${LIST_ITEM_CLASS}`);
+                const keyboard = getListKeyboard($list);
+                const itemHeight = $items.first().outerHeight();
+
+                instance.option('height', itemHeight * 3);
+                instance.option('focusedElement', $items.eq(3));
+                instance.scrollToItem(moveDown ? $items.last() : $items.first());
+
+                keyboard.keyDown(key);
+
+                assert.strictEqual(keyboard.event.isDefaultPrevented(), true, 'event is prevented');
+                assert.strictEqual(keyboard.event.isPropagationStopped(), true, 'propogation is stopped');
+
+                keyboard.keyDown(key);
+
+                assert.strictEqual(keyboard.event.isDefaultPrevented(), false, `event is not prevented when ${moveDown ? 'last' : 'first'} item is focused`);
+                assert.strictEqual(keyboard.event.isPropagationStopped(), false, `propogation is not stopped when ${moveDown ? 'last' : 'first'} item is focused`);
+            });
+        });
+    });
+
     QUnit.test('focus should be moved to selectedItem after focusing of grouped list (T1278005)', function(assert) {
         const list = $('#list').dxList({
             selectedItemKeys: [5],