[v11.0.x] Select: Fixes issue preserving search term (input) when selecting a value (#87249)

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -240,8 +240,13 @@ export function SelectBase<T, Rest = {}>({
     onBlur,
     onChange: onChangeWithEmpty,
     onInputChange: (val: string, actionMeta: InputActionMeta) => {
-      setHasInputValue(!!val);
-      onInputChange?.(val, actionMeta);
+      const newValue = onInputChange?.(val, actionMeta) ?? val;
+      const newHasValue = !!newValue;
+      if (newHasValue !== hasInputValue) {
+        setHasInputValue(newHasValue);
+      }
+
+      return newValue;
     },
     onKeyDown,
     onMenuClose: onCloseMenu,

packages/grafana-ui/src/components/Select/SelectMenu.tsx

@@ -36,6 +36,8 @@ SelectMenu.displayName = 'SelectMenu';
 const VIRTUAL_LIST_ITEM_HEIGHT = 37;
 const VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 8;
 const VIRTUAL_LIST_PADDING = 8;
+// Some list items have icons or checkboxes so we need some extra width
+const VIRTUAL_LIST_WIDTH_EXTRA = 36;
 
 // A virtualized version of the SelectMenu, descriptions for SelectableValue options not supported since those are of a variable height.
 //
@@ -58,7 +60,8 @@ export const VirtualizedSelectMenu = ({ children, maxHeight, options, getValue }
   }
 
   const longestOption = max(options.map((option) => option.label?.length)) ?? 0;
-  const widthEstimate = longestOption * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER + VIRTUAL_LIST_PADDING * 2;
+  const widthEstimate =
+    longestOption * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER + VIRTUAL_LIST_PADDING * 2 + VIRTUAL_LIST_WIDTH_EXTRA;
   const heightEstimate = Math.min(options.length * VIRTUAL_LIST_ITEM_HEIGHT, maxHeight);
 
   // Try to scroll to keep current value in the middle