From 12a3a261a244d647a7c64f06f5797c091828c1b7 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 22 Jul 2024 14:59:46 +0100
Subject: [PATCH] [v11.1.x] Select: Fix scrolling virtualized menu on mobile
 (#90740)

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

pass select-menu innerRef to virtualized list

(cherry picked from commit dc30858e9d8fd5d17652aac896794e5c165218b2)
---
 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 a0dc9336d09..0de6cbbaa0b 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 React, { RefCallback, useEffect, useMemo, useRef } from 'react';
+import React, { RefCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { MenuListProps } from 'react-select';
 import { FixedSizeList as List } from 'react-window';
 
@@ -51,6 +51,7 @@ const VIRTUAL_LIST_WIDTH_EXTRA = 36;
 export const VirtualizedSelectMenu = ({
   children,
   maxHeight,
+  innerRef: scrollRef,
   options,
   focusedOption,
 }: MenuListProps<SelectableValue>) => {
@@ -70,7 +71,7 @@ export const VirtualizedSelectMenu = ({
   const focusedIndex = flattenedOptions.findIndex(
     (option: SelectableValue<unknown>) => option.value === focusedOption?.value
   );
-  useEffect(() => {
+  useLayoutEffect(() => {
     listRef.current?.scrollToItem(focusedIndex);
   }, [focusedIndex]);
 
@@ -98,6 +99,7 @@ export const VirtualizedSelectMenu = ({
 
   return (
     <List
+      outerRef={scrollRef}
       ref={listRef}
       className={styles.menu}
       height={heightEstimate}