From bd4895205ef3741231b6a5e5b63df40419df32a5 Mon Sep 17 00:00:00 2001
From: heswell <steve@heswell.com>
Date: Mon, 16 Oct 2023 09:15:53 +0100
Subject: [PATCH] manage tabIndex of overflow container overflow menu (#906)

---
 .../overflow-container/OverflowContainer.tsx    |  1 +
 .../overflow-container/useOverflowContainer.ts  | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.tsx b/vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.tsx
index 63e8cf415..048173622 100644
--- a/vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.tsx
+++ b/vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.tsx
@@ -103,6 +103,7 @@ const WrapContainer = React.memo(
           icon={overflowIcon}
           menuBuilder={menuBuilder}
           menuActionHandler={menuActionHandler}
+          tabIndex={-1}
         />
       </div>
     );
diff --git a/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts b/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts
index 98660490d..96ab1d073 100644
--- a/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts
+++ b/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts
@@ -38,6 +38,14 @@ export const useOverflowContainer = ({
   // Drag drop needs a ref to container
   const containerRef = useRef<HTMLDivElement | null>(null);
 
+  const setOverflowTabIndex = useCallback((tabIndex: "0" | "-1") => {
+    if (containerRef.current) {
+      containerRef.current
+        .querySelector(".vuuOverflowContainer-OverflowIndicator button")
+        ?.setAttribute("tabindex", tabIndex);
+    }
+  }, []);
+
   const handleResize = useCallback(async () => {
     if (container) {
       let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(
@@ -62,9 +70,16 @@ export const useOverflowContainer = ({
           wrapped = NO_WRAPPED_ITEMS;
         }
       }
+
+      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {
+        setOverflowTabIndex("0");
+      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {
+        setOverflowTabIndex("-1");
+      }
+
       wrappedItemsRef.current = wrapped;
     }
-  }, [container, orientation]);
+  }, [container, orientation, setOverflowTabIndex]);
 
   const hasOverflowItem = (
     opt: unknown