From 4459703d2b0ce2d815b32a35559d032e6c833db8 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 8 Dec 2022 09:44:46 +0000
Subject: [PATCH] pass innerRef to TimeZoneOption so the menu scrolls properly

---
 .../DateTimePickers/TimeZonePicker/TimeZoneOption.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
index af81d2833436..13c9fea13157 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { isString } from 'lodash';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, RefCallback } from 'react';
 
 import { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';
 
@@ -16,6 +16,7 @@ interface Props {
   isFocused: boolean;
   isSelected: boolean;
   innerProps: JSX.IntrinsicElements['div'];
+  innerRef: RefCallback<HTMLDivElement>;
   data: SelectableZone;
 }
 
@@ -26,7 +27,7 @@ export interface SelectableZone extends SelectableValue<string> {
 }
 
 export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => {
-  const { children, innerProps, data, isSelected, isFocused } = props;
+  const { children, innerProps, innerRef, data, isSelected, isFocused } = props;
   const theme = useTheme2();
   const styles = getStyles(theme);
   const timestamp = Date.now();
@@ -39,7 +40,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
   const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);
 
   return (
-    <div className={containerStyles} {...innerProps} aria-label="Select option">
+    <div className={containerStyles} {...innerProps} ref={innerRef} aria-label="Select option">
       <div className={cx(styles.leftColumn, styles.row)}>
         <div className={cx(styles.leftColumn, styles.wideRow)}>
           <TimeZoneTitle title={children} />
@@ -66,7 +67,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
 };
 
 export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (props, ref) => {
-  const { children, innerProps, data, isSelected, isFocused } = props;
+  const { children, innerProps, innerRef, data, isSelected, isFocused } = props;
   const theme = useTheme2();
   const styles = getStyles(theme);
   const timestamp = Date.now();
@@ -79,7 +80,7 @@ export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (
   const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);
 
   return (
-    <div className={containerStyles} {...innerProps} aria-label="Select option">
+    <div className={containerStyles} {...innerProps} ref={innerRef} aria-label="Select option">
       <div className={styles.body}>
         <div className={styles.row}>
           <div className={styles.leftColumn}>