bugfix: autocomplete suggestions keyboard scroll behavior

src/components/req/ReqForm.tsx

@@ -4,6 +4,7 @@ import { Button } from "@mui/joy";
 // Dropdown not used in this form; removed to avoid unused-import warnings
 import { AutoComplete } from "primereact/autocomplete";
 import { InputText } from "primereact/inputtext";
+import { useAutoCompleteScrollFix } from '@/hooks/useAutoCompleteScrollFix';
 
 declare global {
     interface Window {
@@ -45,6 +46,7 @@ export default function ReqForm() {
     const [posterLoading, setPosterLoading] = useState<boolean>(true);
     const [submittedRequest, setSubmittedRequest] = useState<SubmittedRequest | null>(null); // Track successful submission
     const [csrfToken, setCsrfToken] = useState<string | null>(null);
+    const { attachScrollFix, cleanupScrollFix } = useAutoCompleteScrollFix();
 
     // Get CSRF token from window global on mount
     useEffect(() => {
@@ -151,29 +153,7 @@ export default function ReqForm() {
         // Token was already refreshed from the submit response
     };
 
-    const attachScrollFix = () => {
-        setTimeout(() => {
-            const panel = document.querySelector<HTMLElement>(".p-autocomplete-panel");
-            const items = panel?.querySelector<HTMLElement>(".p-autocomplete-items");
-            if (items) {
-                items.style.maxHeight = "200px";
-                items.style.overflowY = "auto";
-                items.style.overscrollBehavior = "contain";
-                const wheelHandler = (e: WheelEvent) => {
-                    const delta = e.deltaY;
-                    const atTop = items.scrollTop === 0;
-                    const atBottom = items.scrollTop + items.clientHeight >= items.scrollHeight;
-                    if ((delta < 0 && atTop) || (delta > 0 && atBottom)) {
-                        e.preventDefault();
-                    } else {
-                        e.stopPropagation();
-                    }
-                };
-                items.removeEventListener("wheel", wheelHandler);
-                items.addEventListener("wheel", wheelHandler, { passive: false });
-            }
-        }, 0);
-    };
+    
 
     const formatMediaType = (mediaTypeValue: MediaType | undefined) => {
         if (!mediaTypeValue) return "";
@@ -286,6 +266,7 @@ export default function ReqForm() {
                             field="label"
                             autoComplete="off"
                             onShow={attachScrollFix}
+                            onHide={cleanupScrollFix}
                             itemTemplate={(item) => (
                                 <div className="p-2 rounded">
                                     <span className="font-medium">{item.label}</span>