From dc30858e9d8fd5d17652aac896794e5c165218b2 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 22 Jul 2024 14:27:50 +0100
Subject: [PATCH] Select: Fix scrolling virtualized menu on mobile (#90724)

pass select-menu innerRef to virtualized list
---
 packages/grafana-ui/src/components/Select/SelectMenu.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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