mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Scrollbar: fix scrollTo being called on stale reference (#90346)
* fix: fix scrollTo being called on stale reference
This commit is contained in:
parent
4de34ac246
commit
bb52c340cc
@ -61,11 +61,7 @@ export const CustomScrollbar = ({
|
||||
}
|
||||
}, [ref, scrollRefCallback]);
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current && scrollTop != null) {
|
||||
ref.current.scrollTop(scrollTop);
|
||||
}
|
||||
}, [scrollTop]);
|
||||
useScrollTop(ref.current, scrollTop);
|
||||
|
||||
/**
|
||||
* Special logic for doing a update a few milliseconds after mount to check for
|
||||
@ -217,3 +213,21 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Calling scrollTop on a scrollbar ref in a useEffect can race with internal state in react-custom-scrollbars-2, causing scrollTop to get called on a stale reference, which prevents the element from scrolling as desired.
|
||||
* Adding the reference to the useEffect dependency array not notify react that the reference has changed (and is an eslint violation), so we create a custom hook so updates to the reference trigger another render, fixing the race condition bug.
|
||||
*
|
||||
* @param scrollBar
|
||||
* @param scrollTop
|
||||
*/
|
||||
function useScrollTop(
|
||||
scrollBar: (Scrollbars & { view: HTMLDivElement; update: () => void }) | null,
|
||||
scrollTop?: number
|
||||
) {
|
||||
useEffect(() => {
|
||||
if (scrollBar && scrollTop != null) {
|
||||
scrollBar.scrollTop(scrollTop);
|
||||
}
|
||||
}, [scrollTop, scrollBar]);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user