21317: initial overflow components up Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

[arvados.git] / services / workbench2 / src / components / multiselect-toolbar / MultiselectToolbar.tsx

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index f92c0dcf4eb6147bd0d645532ca55c29e30d73cd..5017e99dd85a25e4001a0933ad69784f078bf591 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -34,6 +34,7 @@ import { getProcess } from "store/processes/process";
 import { Process } from "store/processes/process";
 import { PublicFavoritesState } from "store/public-favorites/public-favorites-reducer";
 import { isExactlyOneSelected } from "store/multiselect/multiselect-actions";
+import { IntersectionObserverWrapper } from "./ms-toolbar-overflow-wrapper";
 
 const WIDTH_TRANSITION = 150
 
@@ -134,12 +135,14 @@ export const MultiselectToolbar = connect(
                     data-cy='multiselect-toolbar'
                     >
                     {actions.length ? (
-                        actions.map((action, i) =>{
+                        <IntersectionObserverWrapper>
+                        {actions.map((action, i) =>{
                             const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
                         return hasAlts ? (
                             <Tooltip
                                 className={classes.button}
                                 title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
+                                data-targetid={name}
                                 key={i}
                                 disableFocusListener
                             >
@@ -170,7 +173,8 @@ export const MultiselectToolbar = connect(
                                 </span>
                             </Tooltip>
                         );
-                        })
+                        })}
+                        </IntersectionObserverWrapper>
                     ) : (
                         <></>
                     )}