fix(tabs): add fallback values for element width values (#479)

core-ds · Feb 8, 2023 · 820dcf0 · 820dcf0
1 parent 0b62fb9
commit 820dcf0
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 11 deletions.
diff --git 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 ? (
-                <span ref={addonRef} role='tablist' className={styles.pickerWrapper}>
+                <span ref={addonRef} role='menu' className={styles.pickerWrapper}>
                     <PickerButtonDesktop
                         fieldClassName={styles.title}
                         optionClassName={cn(styles.pickerOption, size && styles[size])}

diff --git a/packages/tabs/src/hooks/use-collapsible-elements.ts b/packages/tabs/src/hooks/use-collapsible-elements.ts
@@ -22,22 +22,18 @@ export const useCollapsibleElements = <
             if (!container) return;
 
             const addon = addonRef.current;
-            const moreElement = (
-                Array.from(container.querySelectorAll('[role="tablist"]')) as HTMLElement[]
-            ).pop();
-            const moreElementRect = moreElement?.getBoundingClientRect();
-            const elements = Array.from(container.querySelectorAll(selectors)) as HTMLElement[];
             const containerWidth =
-                (inlineSize || container.clientWidth) - (moreElementRect?.width || 0) * 1.5; // при рассчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
+                (inlineSize || container.clientWidth) - (addon?.scrollWidth || 0) * 1.5; // при расчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
+            const elements = Array.from(container.querySelectorAll(selectors)) as HTMLElement[];
 
             const collapsedIds = elements.reduce<string[]>((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
@@ -19,7 +19,7 @@ export const useTablistTitles = ({
     const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements<
         HTMLDivElement,
         HTMLInputElement
-    >('[role=tab]', [titles]);
+    >('[role=tab]', [titles, collapsedTabsIds]);
 
     const [view] = useMedia<TabsMatchMedia>(
         [['desktop', `(min-width: ${breakpoint}px)`]],