From 3fe352333b8a79b298fa91f8e2f555e8cd3a05b9 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Wed, 29 Jan 2025 18:46:19 -0800
Subject: [PATCH] Fixed: Drop downs flickering in some cases

Closes #7608
---
 .../Components/Form/Select/EnhancedSelectInput.tsx  | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx b/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
index f3b547082..5ae175357 100644
--- a/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
@@ -29,6 +29,8 @@ import HintedSelectInputOption from './HintedSelectInputOption';
 import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
 import styles from './EnhancedSelectInput.css';
 
+const MINIMUM_DISTANCE_FROM_EDGE = 10;
+
 function isArrowKey(keyCode: number) {
   return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
 }
@@ -189,14 +191,9 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleComputeMaxHeight = useCallback((data: any) => {
-    const { top, bottom } = data.offsets.reference;
     const windowHeight = window.innerHeight;
 
-    if (/^bottom/.test(data.placement)) {
-      data.styles.maxHeight = windowHeight - bottom;
-    } else {
-      data.styles.maxHeight = top;
-    }
+    data.styles.maxHeight = windowHeight - MINIMUM_DISTANCE_FROM_EDGE;
 
     return data;
   }, []);
@@ -508,6 +505,10 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
                 enabled: true,
                 fn: handleComputeMaxHeight,
               },
+              preventOverflow: {
+                enabled: true,
+                boundariesElement: 'viewport',
+              },
             }}
           >
             {({ ref, style, scheduleUpdate }) => {