fix(Select): correctly scroll to active element (#1853)

gravity-ui · Sep 12, 2024 · d6c512a · d6c512a
1 parent a1678b6
commit d6c512a
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 8 deletions.
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -32,6 +32,7 @@ import './List.scss';
 
 const b = block('list');
 const DEFAULT_ITEM_HEIGHT = 28;
+const DEFAULT_PAGE_SIZE = 10;
 
 type ListState<T> = {
     items: ListProps<T>['items'];
@@ -224,11 +225,11 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                 break;
             }
             case 'PageDown': {
-                this.handleKeyMove(event, pageSize!);
+                this.handleKeyMove(event, pageSize ?? DEFAULT_PAGE_SIZE);
                 break;
             }
             case 'PageUp': {
-                this.handleKeyMove(event, -pageSize!);
+                this.handleKeyMove(event, -(pageSize ?? DEFAULT_PAGE_SIZE));
                 break;
             }
             case 'Home': {
@@ -280,13 +281,15 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     private renderItem = ({
         index,
         style,
+        height,
         provided,
         isDragging,
     }: {
         index: number;
         style?: React.CSSProperties;
         provided?: DraggableProvided;
         isDragging?: boolean;
+        height?: number;
     }) => {
         const {sortHandleAlign, role} = this.props;
         const {items, activeItem} = this.state;
@@ -301,6 +304,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
             <ListItem
                 key={index}
                 style={style}
+                height={height}
                 itemIndex={index}
                 item={item}
                 sortable={sortable}
@@ -388,6 +392,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                                 ref={this.refContainer}
                                 itemCount={items.length}
                                 provided={droppableProvided}
+                                onScrollToItem={this.props.onScrollToItem}
                             >
                                 {items.map((_item, index) => {
                                     return (
@@ -404,7 +409,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                                                     index,
                                                     isDragging: snapshot.isDragging,
                                                     provided,
-                                                    style: {height: this.getItemHeight(index)},
+                                                    height: this.getItemHeight(index),
                                                 });
                                             }}
                                         </Draggable>
@@ -418,9 +423,13 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
         }
 
         return (
-            <SimpleContainer itemCount={items.length} ref={this.refContainer}>
+            <SimpleContainer
+                itemCount={items.length}
+                ref={this.refContainer}
+                onScrollToItem={this.props.onScrollToItem}
+            >
                 {items.map((_item, index) =>
-                    this.renderItem({index, style: {height: this.getItemHeight(index)}}),
+                    this.renderItem({index, height: this.getItemHeight(index)}),
                 )}
             </SimpleContainer>
         );

diff --git a/src/components/List/components/ListItem.tsx b/src/components/List/components/ListItem.tsx
@@ -26,14 +26,15 @@ function getStyle(provided?: DraggableProvided, style?: React.CSSProperties) {
     };
 }
 
-export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
+export class ListItem<T = unknown> extends React.PureComponent<ListItemProps<T>> {
     private static publishEvent = eventBroker.withEventPublisher('List');
 
     node: HTMLDivElement | null = null;
 
     render() {
         const {
             item,
+            height,
             style,
             sortable,
             sortHandleAlign,
@@ -49,6 +50,7 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
         react-window has a bug where in rtl it setting "right" to 0 instead of undefined.
          */
         const fixedStyle = {
+            height,
             ...style,
             right: undefined,
         };

diff --git a/src/components/List/components/SimpleContainer.tsx b/src/components/List/components/SimpleContainer.tsx
@@ -10,6 +10,7 @@ import type {ListItem} from './ListItem';
 export type SimpleContainerProps = React.PropsWithChildren<{
     itemCount: number;
     provided?: DroppableProvided;
+    onScrollToItem?: (node: HTMLElement) => boolean;
 }>;
 
 type RefsList = Record<number, React.RefObject<ListItem>>;
@@ -64,7 +65,9 @@ export class SimpleContainer extends React.Component<SimpleContainerProps, Simpl
             const node = listItem.getNode();
 
             if (node) {
-                node.scrollIntoView?.({block: 'nearest'});
+                if (!this.props.onScrollToItem?.(node)) {
+                    node.scrollIntoView?.({block: 'nearest'});
+                }
             }
         }
     }

diff --git a/src/components/List/types.ts b/src/components/List/types.ts
@@ -53,6 +53,7 @@ export type ListProps<T = unknown> = QAProps & {
     onLoadMore?: () => void;
     onChangeActive?: (index?: number) => void;
     id?: string;
+    onScrollToItem?: (node: HTMLElement) => boolean;
 };
 
 export type ListItemProps<T> = {
@@ -64,6 +65,7 @@ export type ListItemProps<T> = {
     sortable?: boolean;
     sortHandleAlign?: ListSortHandleAlign;
     style?: React.CSSProperties;
+    height?: number;
     onActivate: (index?: number) => void;
     renderItem?: ListProps<T>['renderItem'];
     onClick?: ListProps<T>['onItemClick'];

diff --git a/src/components/Select/components/SelectList/SelectList.scss b/src/components/Select/components/SelectList/SelectList.scss
@@ -19,6 +19,7 @@ $xl-right-padding: '12px';
 
     &:not(#{$block}_virtualized) {
         overflow: auto;
+        position: relative;
     }
 
     &_mobile {

diff --git a/src/components/Select/components/SelectList/SelectList.tsx b/src/components/Select/components/SelectList/SelectList.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import {List} from '../../../List';
 import {SelectQa, selectListBlock} from '../../constants';
 import type {SelectOption, SelectProps} from '../../types';
-import {getOptionsHeight, getPopupItemHeight} from '../../utils';
+import {getOptionsHeight, getPopupItemHeight, scrollToItem} from '../../utils';
 import type {FlattenOption, GroupTitleItem} from '../../utils';
 
 import {GroupLabel} from './GroupLabel';
@@ -152,6 +152,7 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
             activeItemIndex={activeIndex}
             onChangeActive={onChangeActive}
             deactivateOnLeave={false}
+            onScrollToItem={scrollToItem}
         />
     );
 });

diff --git a/src/components/Select/utils.tsx b/src/components/Select/utils.tsx
@@ -276,3 +276,22 @@ export const getFilteredFlattenOptions = (args: {
         return acc;
     }, [] as FlattenOption[]);
 };
+
+export function scrollToItem(node: HTMLElement) {
+    const container = node.offsetParent;
+    if (container instanceof HTMLElement) {
+        const height = container.offsetHeight;
+        const scrollTop = container.scrollTop;
+
+        const top = node.offsetTop;
+        const bottom = top + node.offsetHeight;
+
+        if (bottom >= scrollTop + height) {
+            container.scrollTo({top: top - height + node.offsetHeight});
+        } else if (top <= scrollTop) {
+            container.scrollTo({top});
+        }
+    }
+
+    return true;
+}