IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-03 12:11:09 -06:00
Code Issues Packages Projects Releases Wiki Activity

Select: Fix scrolling virtualized menu on mobile (#90724)

Browse Source 
pass select-menu innerRef to virtualized list
This commit is contained in:
Ashley Harrison 2024-07-22 14:27:50 +01:00 committed by GitHub
parent 95589ed091
commit dc30858e9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/Select/SelectMenu.tsx
View File

@ -1,6 +1,6 @@
import { cx } from '@emotion/css'; import { cx } from '@emotion/css';
import { max } from 'lodash'; import { max } from 'lodash';
import { RefCallback, useEffect, useMemo, useRef } from 'react'; import { RefCallback, useLayoutEffect, useMemo, useRef } from 'react';
import * as React from 'react'; import * as React from 'react';
import { MenuListProps } from 'react-select'; import { MenuListProps } from 'react-select';
import { FixedSizeList as List } from 'react-window'; import { FixedSizeList as List } from 'react-window';
@ -52,6 +52,7 @@ const VIRTUAL_LIST_WIDTH_EXTRA = 36;
export const VirtualizedSelectMenu = ({ export const VirtualizedSelectMenu = ({
children, children,
maxHeight, maxHeight,
innerRef: scrollRef,
options, options,
focusedOption, focusedOption,
}: MenuListProps<SelectableValue>) => { }: MenuListProps<SelectableValue>) => {
@ -71,7 +72,7 @@ export const VirtualizedSelectMenu = ({
const focusedIndex = flattenedOptions.findIndex( const focusedIndex = flattenedOptions.findIndex(
(option: SelectableValue<unknown>) => option.value === focusedOption?.value (option: SelectableValue<unknown>) => option.value === focusedOption?.value
); );
useEffect(() => { useLayoutEffect(() => {
listRef.current?.scrollToItem(focusedIndex); listRef.current?.scrollToItem(focusedIndex);
}, [focusedIndex]); }, [focusedIndex]);
@ -111,6 +112,7 @@ export const VirtualizedSelectMenu = ({
return ( return (
<List <List
outerRef={scrollRef}
ref={listRef} ref={listRef}
className={styles.menu} className={styles.menu}
height={heightEstimate} height={heightEstimate}