Reposition the select dropdown when the browser is resized. #5206

web/pgadmin/static/js/components/FormComponents.jsx

@@ -42,6 +42,7 @@ import QueryThresholds from './QueryThresholds';
 import SelectThemes from './SelectThemes';
 import { showFileManager } from '../helpers/showFileManager';
 import { withColorPicker } from '../helpers/withColorPicker';
+import { useWindowSize } from '../custom_hooks';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -843,6 +844,7 @@ export const InputSelect = forwardRef(({
   const [[finalOptions, isLoading], setFinalOptions] = useState([[], true]);
   const theme = useTheme();
 
+  useWindowSize();
 
   /* React will always take options let as changed parameter. So,
   We cannot run the below effect with options dependency as it will keep on

web/pgadmin/static/js/custom_hooks.js

@@ -1,4 +1,4 @@
-import {useRef, useEffect, useState, useCallback} from 'react';
+import {useRef, useEffect, useState, useCallback, useLayoutEffect} from 'react';
 import moment from 'moment';
 
 /* React hook for setInterval */
@@ -181,3 +181,16 @@ export function useKeyboardShortcuts(shortcuts, eleRef) {
     shortcutsRef.current = shortcuts;
   }, [shortcuts]);
 }
+
+export function useWindowSize() {
+  const [size, setSize] = useState([999999, 999999]);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+  return size;
+}