From 81895f803387492da728a15fbfffdbb9d3b5025b 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

(cherry picked from commit 3b024443c5447b7638a69a99809bf44b2419261f)

Closes #5386
---
 .../src/Components/Form/EnhancedSelectInput.js  | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js
index cc4215025..8327b9385 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ b/frontend/src/Components/Form/EnhancedSelectInput.js
@@ -20,6 +20,8 @@ import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
 import TextInput from './TextInput';
 import styles from './EnhancedSelectInput.css';
 
+const MINIMUM_DISTANCE_FROM_EDGE = 10;
+
 function isArrowKey(keyCode) {
   return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
 }
@@ -137,18 +139,9 @@ class EnhancedSelectInput extends Component {
   // Listeners
 
   onComputeMaxHeight = (data) => {
-    const {
-      top,
-      bottom
-    } = data.offsets.reference;
-
     const windowHeight = window.innerHeight;
 
-    if ((/^botton/).test(data.placement)) {
-      data.styles.maxHeight = windowHeight - bottom;
-    } else {
-      data.styles.maxHeight = top;
-    }
+    data.styles.maxHeight = windowHeight - MINIMUM_DISTANCE_FROM_EDGE;
 
     return data;
   };
@@ -457,6 +450,10 @@ class EnhancedSelectInput extends Component {
                   order: 851,
                   enabled: true,
                   fn: this.onComputeMaxHeight
+                },
+                preventOverflow: {
+                  enabled: true,
+                  boundariesElement: 'viewport'
                 }
               }}
             >