IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

SegmentSelect: Do not call onCloseMenu when a value was selected (#36905)

Browse Source 
* 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
This commit is contained in:
Piotr Jamróz 2021-07-19 19:57:09 +02:00 committed by GitHub
parent 85a14a0503
commit ef689d0c24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
View File

@ -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<T> extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
value?: SelectableValue<T>;
options: Array<SelectableValue<T>>;
@ -41,6 +44,10 @@ export function SegmentSelect<T>({
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