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

Scrollbar: fix scrollTo being called on stale reference (#90346)

Browse Source 
* fix: fix scrollTo being called on stale reference
This commit is contained in:
Galen Kistler 2024-07-16 11:34:29 -05:00 committed by GitHub
parent 4de34ac246
commit bb52c340cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
View File

@ -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]);
}