From 82b3adcfeb80a2ab9525162e32bfb8f5f4c72c33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 27 Apr 2024 19:17:12 +0200 Subject: [PATCH 1/3] Select: Fixes issue preserving search term (input) when selecting a value --- packages/grafana-ui/src/components/Select/SelectBase.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index 487f1a118ea60..06ab677dc197d 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, From 63bb442e8380efb3243fce84b06e3b3ab3ba9ea6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 28 Apr 2024 17:59:07 +0200 Subject: [PATCH 2/3] Add extra width --- packages/grafana-ui/src/components/Select/SelectMenu.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx index c6120d0a0d253..fae1ef8daa674 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_EXTEA = 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_EXTEA; const heightEstimate = Math.min(options.length * VIRTUAL_LIST_ITEM_HEIGHT, maxHeight); // Try to scroll to keep current value in the middle From e86034d37d7c3a3c23f61115b249854d1fc1690a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Apr 2024 10:30:37 +0200 Subject: [PATCH 3/3] Update --- packages/grafana-ui/src/components/Select/SelectMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx index fae1ef8daa674..faa6a3f4f0ef6 100644 --- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx +++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx @@ -37,7 +37,7 @@ 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_EXTEA = 36; +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. // @@ -61,7 +61,7 @@ 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 + VIRTUAL_LIST_WIDTH_EXTEA; + 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