diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index 19817471e07..a29ab347545 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -240,8 +240,13 @@ export function SelectBase({ 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, diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx index c6120d0a0d2..faa6a3f4f0e 100644 --- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx +++ b/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