Alerting: Fix RelativeTimeRangePicker (#60016)

packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import React, { FormEvent, useCallback, useState } from 'react';
+import { usePopper } from 'react-popper';
 
 import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
 
@@ -11,6 +12,7 @@ import CustomScrollbar from '../../CustomScrollbar/CustomScrollbar';
 import { Field } from '../../Forms/Field';
 import { Icon } from '../../Icon/Icon';
 import { getInputStyles, Input } from '../../Input/Input';
+import { Portal } from '../../Portal/Portal';
 import { Tooltip } from '../../Tooltip/Tooltip';
 import { TimePickerTitle } from '../TimeRangePicker/TimePickerTitle';
 import { TimeRangeList } from '../TimeRangePicker/TimeRangeList';
@@ -50,6 +52,12 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
   const [from, setFrom] = useState<InputState>({ value: timeOption.from, validation: isRangeValid(timeOption.from) });
   const [to, setTo] = useState<InputState>({ value: timeOption.to, validation: isRangeValid(timeOption.to) });
 
+  const [markerElement, setMarkerElement] = useState<HTMLDivElement | null>(null);
+  const [selectorElement, setSelectorElement] = useState<HTMLDivElement | null>(null);
+  const popper = usePopper(markerElement, selectorElement, {
+    placement: 'auto-start',
+  });
+
   const styles = useStyles2(getStyles(from.validation.errorMessage, to.validation.errorMessage));
 
   const onChangeTimeOption = (option: TimeOption) => {
@@ -94,7 +102,7 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
   };
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={setMarkerElement}>
       <button className={styles.pickerInput} onClick={onOpen}>
         <span className={styles.clockIcon}>
           <Icon name="clock-nine" />
@@ -107,8 +115,14 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
         </span>
       </button>
       {isOpen && (
+        <Portal>
           <ClickOutsideWrapper includeButtonPress={false} onClick={onClose}>
-          <div className={styles.content}>
+            <div
+              className={styles.content}
+              ref={setSelectorElement}
+              style={popper.styles.popper}
+              {...popper.attributes}
+            >
               <div className={styles.body}>
                 <CustomScrollbar className={styles.leftSide} hideHorizontalTrack>
                   <TimeRangeList
@@ -153,6 +167,7 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
               </div>
             </div>
           </ClickOutsideWrapper>
+        </Portal>
       )}
     </div>
   );