From d81706051c11b27b116b3734724cb0ebf19536f5 Mon Sep 17 00:00:00 2001 From: junkisai Date: Thu, 25 Sep 2025 18:21:40 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20tab=20reset=20issue=20when?= =?UTF-8?q?=20versions=20update=20via=20realtime?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Track previous version count using useRef to detect new additions - Only trigger onChangeSelectedVersion callback when new versions are added - Preserve user's tab selection during version updates - Maintain ERD tab switch only for explicit user actions and new versions This prevents the active tab from being reset to ERD when existing versions are updated through realtime subscriptions, improving UX consistency. --- .../useRealtimeVersionsWithSchema.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/apps/app/components/SessionDetailPage/hooks/useRealtimeVersionsWithSchema/useRealtimeVersionsWithSchema.ts b/frontend/apps/app/components/SessionDetailPage/hooks/useRealtimeVersionsWithSchema/useRealtimeVersionsWithSchema.ts index aad10745d5..b3981e0d61 100644 --- a/frontend/apps/app/components/SessionDetailPage/hooks/useRealtimeVersionsWithSchema/useRealtimeVersionsWithSchema.ts +++ b/frontend/apps/app/components/SessionDetailPage/hooks/useRealtimeVersionsWithSchema/useRealtimeVersionsWithSchema.ts @@ -2,7 +2,7 @@ import { buildingSchemaVersionsSchema } from '@liam-hq/db' import { type Schema, schemaSchema } from '@liam-hq/schema' -import { useCallback, useEffect, useState, useTransition } from 'react' +import { useCallback, useEffect, useRef, useState, useTransition } from 'react' import * as v from 'valibot' import { createClient } from '../../../../libs/db/client' import { useViewMode } from '../../hooks/viewMode' @@ -31,6 +31,7 @@ export function useRealtimeVersionsWithSchema({ const [selectedVersion, setSelectedVersion] = useState( initialVersions[0] ?? null, ) + const prevVersionsLengthRef = useRef(initialVersions.length) const [displayedSchema, setDisplayedSchema] = useState( initialDisplayedSchema, @@ -91,9 +92,13 @@ export function useRealtimeVersionsWithSchema({ useEffect(() => { const targetVersion = versions[0] ?? null setSelectedVersion(targetVersion) - if (targetVersion !== null) { + + // Call onChangeSelectedVersion only when a new version is added + if (versions.length > prevVersionsLengthRef.current && targetVersion) { onChangeSelectedVersion(targetVersion) } + + prevVersionsLengthRef.current = versions.length }, [versions, onChangeSelectedVersion]) useEffect(() => {