From ef689d0c2477685413a4adc1df7bc0b60d432c7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= Date: Mon, 19 Jul 2021 19:57:09 +0200 Subject: [PATCH] SegmentSelect: Do not call onCloseMenu when a value was selected (#36905) * Do not call onCloseMenu when a value was selected Otherwise a wrong value might be picked up from the input in case when part of the value is in the input (used for filtering) and the actual value is selected. * Add more docs --- .../grafana-ui/src/components/Segment/SegmentSelect.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx index aecf04560e9..fd514eefb30 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx @@ -3,7 +3,10 @@ import { SelectableValue } from '@grafana/data'; import { Select } from '../Select/Select'; import { useTheme2 } from '../../themes/ThemeContext'; -/** @internal */ +/** @internal + * Should be used only internally by Segment/SegmentAsync which can guarantee that SegmentSelect is hidden + * when a value is selected. See comment below on closeMenuOnSelect() + */ export interface Props extends Omit, 'value' | 'onChange'> { value?: SelectableValue; options: Array>; @@ -41,6 +44,10 @@ export function SegmentSelect({ onChange={onChange} options={options} value={value} + // Disable "close menu on select" option to avoid calling onChange() in onCloseMenu() when a value is selected. + // Once the value is selected the Select component (with the menu) will be hidden anyway by the parent component: + // Segment or SegmentAsync - hence setting this option has no UX effect. + closeMenuOnSelect={false} onCloseMenu={() => { if (ref && ref.current) { // https://github.com/JedWatson/react-select/issues/188#issuecomment-279240292