Tweak

Author: joshwooding

packages/lab/src/__tests__/__e2e__/tabs-next/TabsNext.cy.tsx

@@ -105,6 +105,7 @@ describe("Given a Tabstrip", () => {
     cy.realPress("Tab");
     cy.findByRole("tab", { name: "Home" }).should("be.focused");
 
+    cy.wait(100);
     cy.realPress("ArrowLeft");
     cy.findByRole("tab", { name: "13 tabs hidden" }).should("be.focused");
 
@@ -188,6 +189,7 @@ describe("Given a Tabstrip", () => {
     cy.findAllByRole("tab").should("have.length", 5);
 
     cy.findByRole("tab", { name: "13 tabs hidden" }).realClick();
+    cy.findByRole("tab", { name: "Checks" }).should("be.focused");
     cy.realPress("Enter");
     cy.findByRole("tab", { name: "Checks" })
       .should("have.attr", "aria-selected", "true")
@@ -419,16 +421,19 @@ describe("Given a Tabstrip", () => {
       "true",
     );
 
-    cy.get("[data-overflowbutton]").realClick();
+    cy.findByRole("tab", { name: "15 tabs hidden" }).realClick();
+    cy.findByRole("tab", { name: "Loans" }).should("be.focused");
+
     cy.findByRole("tab", { name: "Lots" }).realClick();
+    cy.findByRole("tab", { name: "Lots" }).should("be.focused");
     cy.findByRole("tab", { name: "Lots" }).should(
       "have.attr",
       "aria-selected",
       "true",
     );
 
     cy.findByRole("button", { name: "Lots Close tab" }).realClick();
-    cy.findByRole("tab", { name: "More" })
+    cy.findByRole("tab", { name: "Transactions" })
       .should("have.attr", "aria-selected", "true")
       .and("be.focused");
   });
@@ -442,12 +447,11 @@ describe("Given a Tabstrip", () => {
       cy.mount(<Overflow />);
       cy.findAllByRole("tab").should("have.length", 5);
 
-      cy.get("[data-overflowbutton]").realClick();
+      cy.findByRole("tab", { name: "13 tabs hidden" }).realClick();
       cy.wait(500);
 
       // no horizontal overflow, menu should flip in horizontally
       cy.get("html").then((body) => {
-        console.log(body[0]);
         const { clientWidth, scrollWidth } = body[0];
         expect(clientWidth).to.equal(scrollWidth);
       });

packages/lab/src/tabs-next/TabListNext.tsx

@@ -129,8 +129,12 @@ export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
       if (!currentTab?.stale) return;
       const nextIndex = currentTab.staleIndex ?? -1;
 
-      queueMicrotask(() => {
-        const nextTab = itemAt(nextIndex) ?? getLast();
+      setTimeout(() => {
+        let nextTab = itemAt(nextIndex) ?? getLast();
+
+        if (nextTab?.element === overflowButtonRef.current) {
+          nextTab = itemAt(nextIndex - 1);
+        }
 
         if (nextTab) {
           if (currentTabIsSelected) {
@@ -140,11 +144,12 @@ export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
             nextTab.element?.focus();
           }
         }
-      });
+      }, 88);
     });
 
     useEffect(() => {
       const handleFocus = () => {
+        if (!tabstripRef.current) return;
         handleTabRemoval();
       };
 

packages/lab/src/tabs-next/hooks/useCollection.ts

@@ -65,8 +65,7 @@ export function useCollection({ wrap }: UseCollectionProps) {
 
       const newItems = Array.from(itemMap.current.values());
       itemsRef.current = sortBasedOnDOMPosition(newItems);
-      batchTimeout.current = null;
-    }, 166);
+    }, 88);
 
     return () => {
       itemMap.current.set(item.id, {

packages/lab/src/tabs-next/hooks/useOverflow.ts

@@ -12,6 +12,7 @@ import {
   type RefObject,
   useEffect,
   useMemo,
+  useState,
 } from "react";
 import type { TabNextProps } from "../TabNext";
 
@@ -27,8 +28,6 @@ function getTabWidth(element: HTMLElement) {
   return Math.ceil(width);
 }
 
-let pinned: string | undefined;
-
 export function useOverflow({
   container,
   overflowButton,
@@ -42,6 +41,7 @@ export function useOverflow({
     visibleCount: Number.POSITIVE_INFINITY,
     isMeasuring: false,
   });
+  const [pinned, setPinned] = useState(selected);
 
   const pinnedValue = pinned ?? selected;
 
@@ -214,13 +214,13 @@ export function useOverflow({
     [childArray, visibleCount],
   );
 
-  const hiddenSelectedIndex = hidden.findIndex(
+  const hiddenSelected = hidden.find(
     (child) =>
       isValidElement<TabNextProps>(child) && child?.props?.value === selected,
   );
 
-  if (hiddenSelectedIndex !== -1) {
-    pinned = selected;
+  if (hiddenSelected) {
+    setPinned(selected);
   }
 
   const hiddenPinnedIndex = hidden.findIndex(