From 677060862c2ebe8001f55c3e5bdb8f1583632609 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Thu, 6 Feb 2025 17:34:52 +0100
Subject: [PATCH] Combobox: Fix list not being virtualized initially in some
 cases (#100188)

* Combobox: Set arbitrary initial max size

* Remove ?

* Set initial values to 0
---
 .../src/components/Combobox/useComboboxFloat.ts          | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
index 83eb2631a62..f5803afdf2e 100644
--- a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
+++ b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
@@ -22,7 +22,10 @@ export const useComboboxFloat = (items: Array<ComboboxOption<string | number>>,
   const inputRef = useRef<HTMLInputElement>(null);
   const floatingRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
-  const [popoverMaxSize, setPopoverMaxSize] = useState<{ width: number; height: number } | undefined>(undefined);
+  const [popoverMaxSize, setPopoverMaxSize] = useState<{ width: number; height: number }>({
+    width: 0,
+    height: 0,
+  }); // set initial values to prevent infinite size, briefly removing the list virtualization
 
   const scrollbarWidth = useMemo(() => getScrollbarWidth(), []);
 
@@ -72,10 +75,10 @@ export const useComboboxFloat = (items: Array<ComboboxOption<string | number>>,
   const floatStyles = {
     ...floatingStyles,
     width: longestItemWidth,
-    maxWidth: popoverMaxSize?.width,
+    maxWidth: popoverMaxSize.width,
     minWidth: inputRef.current?.offsetWidth,
 
-    maxHeight: popoverMaxSize?.height,
+    maxHeight: popoverMaxSize.height,
   };
 
   return { inputRef, floatingRef, scrollRef, floatStyles };