diff --git a/packages/tabs/src/components/primary-tablist/Component.tsx b/packages/tabs/src/components/primary-tablist/Component.tsx index 30b1daef7d..ceb14798c7 100644 --- a/packages/tabs/src/components/primary-tablist/Component.tsx +++ b/packages/tabs/src/components/primary-tablist/Component.tsx @@ -101,7 +101,7 @@ export const PrimaryTabList = ({ ))} {collapsedOptions.length ? ( - + ((acc, element) => { - const { offsetLeft, offsetWidth, id } = element; - const elementOffset = offsetLeft + offsetWidth; + const { offsetLeft, scrollWidth, id } = element; + const elementOffset = offsetLeft + scrollWidth; const isCollapsedElement = getComputedStyle(element).visibility === 'collapse'; const maxWidth = addon && !isCollapsedElement ? containerWidth - - (addon.offsetWidth + parseFloat(getComputedStyle(addon).marginLeft)) + (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft)) : containerWidth; if (elementOffset >= maxWidth) acc.push(id); diff --git a/packages/tabs/src/hooks/use-tablist-titles.ts b/packages/tabs/src/hooks/use-tablist-titles.ts index faa58cdcc9..88d96ed8f2 100644 --- a/packages/tabs/src/hooks/use-tablist-titles.ts +++ b/packages/tabs/src/hooks/use-tablist-titles.ts @@ -19,7 +19,7 @@ export const useTablistTitles = ({ const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements< HTMLDivElement, HTMLInputElement - >('[role=tab]', [titles]); + >('[role=tab]', [titles, collapsedTabsIds]); const [view] = useMedia( [['desktop', `(min-width: ${breakpoint}px)`]],