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: Fix closing the menu on click out (#36816)

Browse Source
This commit is contained in:
Piotr Jamróz 2021-07-16 08:39:06 +02:00 committed by GitHub
parent 2e0dc835cf
commit 3778e9bbbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import React, { HTMLProps, useRef } from 'react'; import React, { HTMLProps, useRef } from 'react';
import useClickAway from 'react-use/lib/useClickAway';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { Select } from '../Select/Select'; import { Select } from '../Select/Select';
import { useTheme2 } from '../../themes/ThemeContext'; import { useTheme2 } from '../../themes/ThemeContext';
@ -29,19 +28,6 @@ export function SegmentSelect<T>({
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const theme = useTheme2(); const theme = useTheme2();
useClickAway(ref, () => {
if (ref && ref.current) {
// https://github.com/JedWatson/react-select/issues/188#issuecomment-279240292
// Unfortunately there's no other way of retrieving the (not yet) created new option
const input = ref.current.querySelector('input[id^="react-select-"]') as HTMLInputElement;
if (input && input.value) {
onChange({ value: input.value as any, label: input.value });
} else {
onClickOutside();
}
}
});
let width = widthPixels > 0 ? widthPixels / theme.spacing.gridSize : undefined; let width = widthPixels > 0 ? widthPixels / theme.spacing.gridSize : undefined;
return ( return (
@ -55,6 +41,18 @@ export function SegmentSelect<T>({
onChange={onChange} onChange={onChange}
options={options} options={options}
value={value} value={value}
onCloseMenu={() => {
if (ref && ref.current) {
// https://github.com/JedWatson/react-select/issues/188#issuecomment-279240292
// Unfortunately there's no other way of retrieving the value (not yet) created new option
const input = ref.current.querySelector('input[id^="react-select-"]') as HTMLInputElement;
if (input && input.value) {
onChange({ value: input.value as any, label: input.value });
} else {
onClickOutside();
}
}
}}
allowCustomValue={allowCustomValue} allowCustomValue={allowCustomValue}
/> />
</div> </div>