Merge pull request #2511 from epam/fix/virtual-list-not-limited-conta…

…iner-error-added [VirtualList]: Added logging of error for not limited VirtualList parent container.
epam · Oct 2, 2024 · cc8da91 · cc8da91
2 parents 3537aa1 + c2480ab
commit cc8da91
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/uui-components/src/pickers/hooks/usePickerInput.ts b/uui-components/src/pickers/hooks/usePickerInput.ts
@@ -93,13 +93,14 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
             document.body.style.overflow = !newOpened && modals.length === 0 ? '' : 'hidden';
         }
 
-        handleDataSourceValueChange({
-            ...dataSourceState,
+        handleDataSourceValueChange((prevState) => ({
+            ...prevState,
             topIndex: 0,
             visibleCount: initialRowsVisible,
             focusedIndex: 0,
+            scrollTo: undefined,
             search: '',
-        });
+        }));
 
         setIsSearchChanged(false);
         setOpened(newOpened);

diff --git a/uui-core/src/hooks/useVirtualList/useVirtualList.ts b/uui-core/src/hooks/useVirtualList/useVirtualList.ts
@@ -6,6 +6,8 @@ import {
     getOffsetYForIndex, getScrollToCoordinate, getRealTopIndex, getTopIndexWithOffset,
 } from './utils';
 import { VirtualListInfo, UseVirtualListProps, UseVirtualListApi, RowsInfo } from './types';
+import { usePrevious } from '../usePrevious';
+import { devLogger } from '../../helpers';
 
 export function useVirtualList<List extends HTMLElement = any, ScrollContainer extends HTMLElement = any>(
     props: UseVirtualListProps,
@@ -26,6 +28,9 @@ export function useVirtualList<List extends HTMLElement = any, ScrollContainer e
     const scrollContainer = React.useRef<ScrollContainer>();
     const rowHeights = React.useRef<number[]>([]);
     const rowOffsets = React.useRef<number[]>([]);
+    const scrollContainerHeightChangesCount = React.useRef<number>(0);
+    const scrollContainerHeightIsNotLimited = React.useRef(false);
+    const prevScrollContainerClientHeight = usePrevious(scrollContainer.current?.clientHeight);
 
     const virtualListInfo = React.useMemo((): VirtualListInfo => ({
         scrollContainer: scrollContainer.current,
@@ -53,6 +58,21 @@ export function useVirtualList<List extends HTMLElement = any, ScrollContainer e
         rowsSelector,
     ]);
 
+    useLayoutEffectSafeForSsr(() => {
+        if (__DEV__) {
+            if (scrollContainer.current?.clientHeight
+                && prevScrollContainerClientHeight
+                && scrollContainer.current?.clientHeight !== prevScrollContainerClientHeight
+            ) {
+                ++scrollContainerHeightChangesCount.current;
+            }
+            if (scrollContainerHeightChangesCount.current > 20 && !scrollContainerHeightIsNotLimited.current) {
+                scrollContainerHeightIsNotLimited.current = true;
+                devLogger.warn('[VirtualList]: The scroll container height is not limited. Please ensure that the VirtualList\'s parent container has a defined, limited height.');
+            }
+        }
+    });
+
     useLayoutEffectSafeForSsr(() => {
         if (!scrollContainer.current || !listContainer.current) return;
         const { top: scrollContainerTop } = scrollContainer.current.getBoundingClientRect();
@@ -82,7 +102,9 @@ export function useVirtualList<List extends HTMLElement = any, ScrollContainer e
         if (value?.scrollTo !== scrolledTo && value?.scrollTo?.index != null) {
             handleForceScrollToIndex(rowsInfo);
         } else {
-            handleScrollOnRerender(rowsInfo);
+            if (!scrollContainerHeightIsNotLimited.current) {
+                handleScrollOnRerender(rowsInfo);
+            }
         }
     });
 

diff --git a/uui-core/src/hooks/useVirtualList/utils.ts b/uui-core/src/hooks/useVirtualList/utils.ts
@@ -112,6 +112,7 @@ export const getRealTopIndex = ({ rowsCount, scrollContainer, rowOffsets }: Virt
 const getRealBottomIndex = ({ rowsCount, scrollContainer, rowOffsets, value: { topIndex } }: VirtualListInfo) => {
     let bottomIndex = topIndex;
     const containerScrollTop = scrollContainer?.scrollTop ?? 0;
+
     const containerScrollBottom = containerScrollTop + scrollContainer?.clientHeight ?? 0;
     while (bottomIndex < rowsCount && rowOffsets[bottomIndex] < containerScrollBottom) {
         bottomIndex++;