From d363741d390e98fd1251ea69bc95186e6eab9aed Mon Sep 17 00:00:00 2001
From: Ben Simpson <benjo696@gmail.com>
Date: Mon, 12 Jun 2023 13:52:23 +0100
Subject: [PATCH] Grafana UI: Add scroll handlers to the Select component
 (#65069)

* [feat] Add scroll handlers to the Select component

* [refactor] Update Select component

- Update how `captureMenuScroll` boolean is set
- Update props

* [fix] revert unexpected changes
---
 packages/grafana-ui/src/components/Select/SelectBase.tsx | 6 +++++-
 packages/grafana-ui/src/components/Select/types.ts       | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index eac330e6fb1..d8f531c766f 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -131,6 +131,8 @@ export function SelectBase<T>({
   onCreateOption,
   onInputChange,
   onKeyDown,
+  onMenuScrollToBottom,
+  onMenuScrollToTop,
   onOpenMenu,
   onFocus,
   openMenuOnFocus = false,
@@ -215,7 +217,7 @@ export function SelectBase<T>({
     autoFocus,
     backspaceRemovesValue,
     blurInputOnSelect,
-    captureMenuScroll: false,
+    captureMenuScroll: onMenuScrollToBottom || onMenuScrollToTop,
     closeMenuOnSelect,
     // We don't want to close if we're actually scrolling the menu
     // So only close if none of the parents are the select menu itself
@@ -252,6 +254,8 @@ export function SelectBase<T>({
     onKeyDown,
     onMenuClose: onCloseMenu,
     onMenuOpen: onOpenMenu,
+    onMenuScrollToBottom: onMenuScrollToBottom,
+    onMenuScrollToTop: onMenuScrollToTop,
     onFocus,
     formatOptionLabel,
     openMenuOnFocus,
diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts
index b71874b1744..12b8714e4ba 100644
--- a/packages/grafana-ui/src/components/Select/types.ts
+++ b/packages/grafana-ui/src/components/Select/types.ts
@@ -24,6 +24,7 @@ export interface SelectCommonProps<T> {
   autoFocus?: boolean;
   backspaceRemovesValue?: boolean;
   blurInputOnSelect?: boolean;
+  captureMenuScroll?: boolean;
   className?: string;
   closeMenuOnSelect?: boolean;
   /** Used for custom components. For more information, see `react-select` */
@@ -70,6 +71,10 @@ export interface SelectCommonProps<T> {
   onCreateOption?: (value: string) => void;
   onInputChange?: (value: string, actionMeta: InputActionMeta) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
+  /** Callback which fires when the user scrolls to the bottom of the menu */
+  onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
+  /** Callback which fires when the user scrolls to the top of the menu */
+  onMenuScrollToTop?: (event: WheelEvent | TouchEvent) => void;
   onOpenMenu?: () => void;
   onFocus?: () => void;
   openMenuOnFocus?: boolean;