fix: tabs condition (#707)

gravity-ui · Nov 21, 2023 · 71b27ee · 71b27ee
1 parent 5604d29
commit 71b27ee
Showing 1 changed file with 18 additions and 12 deletions.
diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx
@@ -40,24 +40,30 @@ export const TabsBlock = ({
     const mediaWidth = ref?.current?.offsetWidth;
     const captionId = useUniqId();
     const themedMedia = getThemedValue(activeTabData?.media, theme);
-    const hasNoImage = !themedMedia?.image || !activeTabData?.image;
+    const hasNoImage = !themedMedia?.image && !activeTabData?.image;
     const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);
     const [minImageHeight, setMinImageHeight] = useState(ref?.current?.offsetHeight);
     // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
     let imageProps;
 
     const handleImageHeight = useCallback(() => {
-        setMinImageHeight(ref?.current?.offsetHeight);
-    }, []);
-
-    const onSelectTab = (
-        id: string | null,
-        e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
-    ) => {
-        setActiveTab(id);
-        handleImageHeight();
-        e.currentTarget.scrollIntoView({inline: 'center', behavior: 'smooth', block: 'nearest'});
-    };
+        if (minImageHeight !== ref?.current?.offsetHeight) {
+            setMinImageHeight(ref?.current?.offsetHeight);
+        }
+    }, [minImageHeight]);
+
+    const onSelectTab = useCallback(
+        (id: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+            setActiveTab(id);
+            handleImageHeight();
+            e.currentTarget.scrollIntoView({
+                inline: 'center',
+                behavior: 'smooth',
+                block: 'nearest',
+            });
+        },
+        [handleImageHeight],
+    );
 
     if (activeTabData) {
         const themedImage = getThemedValue(activeTabData?.image, theme);