fix(tabs): фикс бага при скрытии табов (#851)

* fix(tabs): fix id for hidden tabs * feat(tabs): update next frocus index Co-authored-by: Сидоров Александр Владимирович <ASidorov7@alfabank.ru> Co-authored-by: Aleksandr Sidorov <director@blaze.su>
core-ds · Oct 13, 2021 · 5d5dcd9 · 5d5dcd9
1 parent 1654da4
commit 5d5dcd9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/tabs/src/components/primary-tablist/Component.tsx b/packages/tabs/src/components/primary-tablist/Component.tsx
@@ -34,9 +34,10 @@ export const PrimaryTabList = ({
 
     const renderContent = () => (
         <React.Fragment>
-            {titles
-                .filter(item => !item.hidden)
-                .map((item, index) => (
+            {titles.map((item, index) => {
+                if (item.hidden) return null;
+
+                return (
                     <KeyboardFocusable key={item.id}>
                         {(ref, focused) => (
                             <button
@@ -56,7 +57,8 @@ export const PrimaryTabList = ({
                             </button>
                         )}
                     </KeyboardFocusable>
-                ))}
+                );
+            })}
 
             <div className={styles.line} ref={lineRef} />
         </React.Fragment>

diff --git a/packages/tabs/src/useTabs.tsx b/packages/tabs/src/useTabs.tsx
@@ -1,4 +1,5 @@
-import { useState, useCallback, useRef, MouseEvent, KeyboardEvent, MutableRefObject } from 'react';
+import { KeyboardEvent, MouseEvent, MutableRefObject, useCallback, useRef, useState } from 'react';
+
 import { UseTabsProps } from './typings';
 
 export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
@@ -27,7 +28,9 @@ export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
         (position: 'prev' | 'next' | 'start' | 'end') => {
             const refs = itemRefs.current;
 
-            if (refs.every(ref => ref.disabled)) return;
+            const tabAvailable = (ref: HTMLButtonElement) => ref && !ref.disabled;
+
+            if (refs.every(ref => !tabAvailable(ref))) return;
 
             let focusedTabIndex = refs.findIndex(node => document.activeElement === node);
 
@@ -53,7 +56,7 @@ export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
 
             const shift = ['prev', 'end'].includes(position) ? -1 : 1;
 
-            while (refs[newFocusIndex].disabled) {
+            while (!tabAvailable(refs[newFocusIndex])) {
                 newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;
             }