From 147fff3c19fd86c04167b59f0fd394b9df5a5883 Mon Sep 17 00:00:00 2001
From: Kirill Kharitonov <kirkharitonov@qavm-477c8d9e.qemu>
Date: Mon, 29 Jan 2024 19:34:09 +0300
Subject: [PATCH] fix(List): calling onLoadMore function

---
 src/components/List/List.tsx                  | 12 ++++++-----
 .../List/__stories__/List.stories.tsx         | 21 +++++++++++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 3e8c3bee10..4fb2d291db 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -93,7 +93,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     refFilter = React.createRef<HTMLInputElement>();
     refContainer = React.createRef<any>();
     blurTimer: ReturnType<typeof setTimeout> | null = null;
-    loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: true} as unknown as ListItemData<
+    loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: false} as unknown as ListItemData<
         T & {value: string}
     >;
     uniqId = getUniqId();
@@ -518,11 +518,13 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     };
 
     private handleKeyMove(event: React.KeyboardEvent, step: number, defaultItemIndex = 0) {
-        event.preventDefault();
         const {activeItem = defaultItemIndex} = this.state;
-        this.activateItem(
-            List.findNextIndex<T>(this.state.items, activeItem + step, Math.sign(step)),
-        );
+
+        event.preventDefault();
+
+        const items = this.getItemsWithLoading();
+
+        this.activateItem(List.findNextIndex<T>(items, activeItem + step, Math.sign(step)));
     }
 
     private handleFocus = () => {
diff --git a/src/components/List/__stories__/List.stories.tsx b/src/components/List/__stories__/List.stories.tsx
index c103bbbd9d..a3f8d74829 100644
--- a/src/components/List/__stories__/List.stories.tsx
+++ b/src/components/List/__stories__/List.stories.tsx
@@ -44,7 +44,28 @@ export const RenderItem = RenderItemTemplate.bind({});
 RenderItem.args = {
     items,
     renderItem: (item) => `🔥🔥🔥 ${item} 🔥🔥🔥`,
+};
+
+const TemplateWithState: ComponentStory<ComponentType> = (args) => {
+    const [items, setItems] = React.useState(args.items);
+
+    const onLoadMore = () => {
+        // delay for fetching new real items
+        setTimeout(() => {
+            setItems([...items, ...args.items]);
+        }, 300);
+    };
+
+    return <List {...args} items={items} onLoadMore={onLoadMore} />;
+};
+
+export const WithLoadingMoreItems = TemplateWithState.bind({});
+WithLoadingMoreItems.args = {
+    items: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'],
     itemsHeight: 150,
+    itemHeight: 28,
+    loading: true,
+    virtualized: false,
 };
 
 const ShowcaseTemplate: ComponentStory<ComponentType> = () => <ListShowcase />;