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

Data links: Fix issue with not being able to click a variable after scroll (#46643)

Browse Source
This commit is contained in:
Joao Silva 2022-03-17 10:31:23 +00:00 committed by GitHub
parent 22a4c5f086
commit c224da0f02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
View File

@ -80,6 +80,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
const [suggestionsIndex, setSuggestionsIndex] = useState(0);
const [linkUrl, setLinkUrl] = useState<Value>(makeValue(value));
const prevLinkUrl = usePrevious<Value>(linkUrl);
const [scrollTop, setScrollTop] = useState(0);
// Workaround for https://github.com/ianstormtaylor/slate/issues/2927
const stateRef = useRef({ showingSuggestions, suggestions, suggestionsIndex, linkUrl, onChange });
@ -87,10 +88,9 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
// Used to get the height of the suggestion elements in order to scroll to them.
const activeRef = useRef<HTMLDivElement>(null);
const activeIndexPosition = useMemo(
() => getElementPosition(activeRef.current, suggestionsIndex),
[suggestionsIndex]
);
useEffect(() => {
setScrollTop(getElementPosition(activeRef.current, suggestionsIndex));
}, [suggestionsIndex]);
// SelectionReference is used to position the variables suggestion relatively to current DOM selection
const selectionRef = useMemo(() => new SelectionReference(), []);
@ -183,7 +183,11 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
{({ ref, style, placement }) => {
return (
<div ref={ref} style={style} data-placement={placement} className={styles.suggestionsWrapper}>
<CustomScrollbar scrollTop={activeIndexPosition} autoHeightMax="300px">
<CustomScrollbar
scrollTop={scrollTop}
autoHeightMax="300px"
setScrollTop={({ scrollTop }) => setScrollTop(scrollTop)}
>
<DataLinkSuggestions
activeRef={activeRef}
suggestions={stateRef.current.suggestions}