X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/976db4132cdb68bddb5a185d74a053355f91e549..562687ce72e709d485aa47773117a51a764a6606:/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx index d50d1f3f28..5c1c433712 100644 --- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx +++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx @@ -46,13 +46,13 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro const navRef = useRef(null); const [visibilityMap, setVisibilityMap] = useState>({}); const [numHidden, setNumHidden] = useState(() => findNumHidden(visibilityMap)); - const prevNumHidden = useRef(numHidden); - + const handleIntersection = (entries) => { const updatedEntries: Record = {}; entries.forEach((entry) => { const targetid = entry.target.dataset.targetid as string; + //if true, the element is visible if (entry.isIntersecting) { updatedEntries[targetid] = true; } else { @@ -67,8 +67,9 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro })); }; + //ensures that the last element is always visible if the second to last is visible useEffect(() => { - if (prevNumHidden.current === 2 && numHidden === 1) { + if ((prevNumHidden.current > 1 || prevNumHidden.current === 0) && numHidden === 1) { setVisibilityMap((prev) => ({ ...prev, [lastEntryId]: true, @@ -125,7 +126,7 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro visibilityMap={visibilityMap} className={classes.overflowStyle} > - {children} + {children.filter((child) => !child.props['data-targetid'].includes("Divider"))} )}