fix: prevent tab synchronization between different records by Eruis2579 · Pull Request #17559 · twentyhq/twenty

Eruis2579 · 2026-01-29T13:57:28Z

Fixes issue where tabs were synchronized when opening two records of the same type in show page and side panel.

The root cause was that tab instance IDs were only based on pageLayoutId, causing all records using the same page layout to share the same tab state.

This change includes the record ID in the tab instance ID, making tabs unique per record while maintaining backward compatibility for cases where no record ID is available.

Fixes #17522

Include record ID in tab instance ID so that tabs are unique per record, not just per page layout. This prevents tabs from being synchronized when opening two records of the same type in show page and side panel. Fixes twentyhq#17522

github-actions · 2026-01-29T13:58:36Z

	Fails
🚫	`node` failed.

Log

Details

�[31mError: �[39m SyntaxError: Unexpected token 'C', "Contributo"... is not valid JSON
    at JSON.parse (<anonymous>)
�[90m    at parseJSONFromBytes (node:internal/deps/undici/undici:4259:19)�[39m
�[90m    at successSteps (node:internal/deps/undici/undici:6882:27)�[39m
�[90m    at readAllBytes (node:internal/deps/undici/undici:5807:13)�[39m
�[90m    at process.processTicksAndRejections (node:internal/process/task_queues:103:5)�[39m
danger-results://tmp/danger-results-47737edb.json

Generated by 🚫 dangerJS against 330ea16

greptile-apps · 2026-01-29T14:00:22Z

Greptile Overview

Greptile Summary

Fixed tab synchronization bug where tabs were shared between different records of the same type when opened in show page and side panel. The root cause was that tab instance IDs were only based on pageLayoutId, causing all records using the same page layout to share tab state.

Key Changes:

Added record ID from layoutRenderingContext.targetRecordIdentifier.id to tab instance ID computation
Maintained backward compatibility by falling back to pageLayoutId-only instance ID when no record ID is available
Solution aligns with existing pattern used in ShowPageSubContainer (getShowPageTabListComponentId) which already includes targetObjectId

The fix is simple, focused, and correctly scopes tab state per record instance.

Confidence Score: 5/5

This PR is safe to merge with minimal risk
The fix is straightforward, well-scoped, and follows existing patterns in the codebase. It adds the record ID to tab instance IDs to prevent unwanted synchronization while maintaining backward compatibility. No logical errors, security issues, or side effects identified.
No files require special attention

Important Files Changed

Filename	Overview
packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx	Prevented tab synchronization between different records by including record ID in tab instance ID

Sequence Diagram

sequenceDiagram
    participant User
    participant PageLayoutRenderer
    participant LayoutRenderingContext
    participant TabListContext
    participant TabList
    
    User->>PageLayoutRenderer: Opens Record A in show page
    PageLayoutRenderer->>LayoutRenderingContext: useLayoutRenderingContext()
    LayoutRenderingContext-->>PageLayoutRenderer: Returns context with recordId A
    PageLayoutRenderer->>PageLayoutRenderer: Compute tabListInstanceId<br/>(pageLayoutId-tab-list-recordIdA)
    PageLayoutRenderer->>TabListContext: Provide instanceId
    TabListContext->>TabList: Render with unique instance ID
    
    User->>PageLayoutRenderer: Opens Record B in side panel
    PageLayoutRenderer->>LayoutRenderingContext: useLayoutRenderingContext()
    LayoutRenderingContext-->>PageLayoutRenderer: Returns context with recordId B
    PageLayoutRenderer->>PageLayoutRenderer: Compute tabListInstanceId<br/>(pageLayoutId-tab-list-recordIdB)
    PageLayoutRenderer->>TabListContext: Provide different instanceId
    TabListContext->>TabList: Render with separate instance ID
    
    Note over TabList: Tabs remain independent<br/>No synchronization occurs

greptile-apps

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

cubic-dev-ai

No issues found across 1 file

github-actions · 2026-01-29T14:09:59Z

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:33721

This environment will automatically shut down when the PR is closed or after 5 hours.

useLayoutRenderingContext() throws if context is missing, so it never returns undefined. Only targetRecordIdentifier needs optional chaining since it can be undefined according to the type definition.

This ensures DASHBOARD layouts use the standard tab instance ID without record ID, fixing Storybook test failures while maintaining tab isolation for record pages.

Eruis2579 · 2026-01-30T15:29:02Z

hi @Weiko
Could you review my PR, please?
Thank you.

Weiko · 2026-01-30T16:25:23Z

hi @Weiko Could you review my PR, please? Thank you.

Hi, thanks for your contribution.
I've tried locally and see an empty page

This is most likely a mismatch between your change and PageLayoutRendererContent not computing the instanceId with the recordId

Create getTabListInstanceIdFromPageLayoutAndRecord utility function to ensure both PageLayoutRenderer and PageLayoutRendererContent compute the tab list instance ID consistently, including record ID for RECORD_PAGE layouts. This fixes the empty page issue caused by instance ID mismatch.

Eruis2579 · 2026-01-30T18:05:32Z

hi @Weiko Could you review my PR, please? Thank you.

Hi, thanks for your contribution. I've tried locally and see an empty page

This is most likely a mismatch between your change and PageLayoutRendererContent not computing the instanceId with the recordId

Hi, I have fixed this issue.
Please check again.

Eruis2579 · 2026-02-02T15:41:08Z

Hi, @Weiko
Could you review my PR again please?

Eruis2579 · 2026-02-02T22:23:46Z

Hi, @Weiko
can you review again please?

Eruis2579 · 2026-02-03T17:29:46Z

hi @Weiko Could you review my PR, please? Thank you.

Hi, thanks for your contribution. I've tried locally and see an empty page

This is most likely a mismatch between your change and PageLayoutRendererContent not computing the instanceId with the recordId

Please review my PR again

Eruis2579 · 2026-02-04T04:24:09Z

@Weiko please review my PR

Eruis2579 · 2026-02-04T04:50:51Z

@charlesBochet Please review my PR

Eruis2579 · 2026-02-05T18:49:06Z

Anyone can review this PR?

Eruis2579 · 2026-02-08T01:16:12Z

Hi, @Weiko If you have time, please check my PR again.

Weiko

Thanks for your contribution. LGTM

Use type-only import for PageLayoutType type annotation and string literal for enum comparison to avoid TypeScript module resolution issues in CI.

…mport issue Use indexed access type LayoutRenderingContextType['layoutType'] instead of directly importing PageLayoutType to avoid TypeScript module resolution errors in CI environment.

Eruis2579 · 2026-02-13T11:10:41Z

@github-merge-queue, check merge queue again.

Eruis2579 · 2026-02-13T11:12:05Z

Hi, @Weiko , Please add this PR to merge queue again. I have fixed some for front build check

twenty-eng-sync · 2026-02-13T13:22:05Z

Hey @Weiko! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!

twenty-eng-sync · 2026-02-13T13:22:08Z

Hey @Weiko! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!

greptile-apps bot reviewed Jan 29, 2026

View reviewed changes

cubic-dev-ai bot reviewed Jan 29, 2026

View reviewed changes

Eruis added 2 commits January 29, 2026 16:03

refactor: fix optional chaining on useLayoutRenderingContext

c691de8

useLayoutRenderingContext() throws if context is missing, so it never returns undefined. Only targetRecordIdentifier needs optional chaining since it can be undefined according to the type definition.

fix: only include record ID in tab instance ID for RECORD_PAGE layouts

4df9f5c

This ensures DASHBOARD layouts use the standard tab instance ID without record ID, fixing Storybook test failures while maintaining tab isolation for record pages.

charlesBochet assigned Weiko Jan 30, 2026

charlesBochet added the -PR: awaiting author label Jan 30, 2026

fix: prettier formatting in getTabListInstanceIdFromPageLayoutAndRecord

9c35ef7

Weiko approved these changes Feb 13, 2026

View reviewed changes

Weiko added this pull request to the merge queue Feb 13, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Feb 13, 2026

Eruis added 2 commits February 13, 2026 11:46

fix: use type import for PageLayoutType to fix TypeScript error

c309a30

Use type-only import for PageLayoutType type annotation and string literal for enum comparison to avoid TypeScript module resolution issues in CI.

fix: derive PageLayoutType from LayoutRenderingContextType to avoid i…

330ea16

…mport issue Use indexed access type LayoutRenderingContextType['layoutType'] instead of directly importing PageLayoutType to avoid TypeScript module resolution errors in CI environment.

Weiko added this pull request to the merge queue Feb 13, 2026

Merged via the queue into twentyhq:main with commit befbcef Feb 13, 2026
62 checks passed

Conversation

Eruis2579 commented Jan 29, 2026

Uh oh!

github-actions bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Log

Uh oh!

greptile-apps bot commented Jan 29, 2026

Greptile Overview

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Eruis2579 commented Jan 30, 2026

Uh oh!

Weiko commented Jan 30, 2026

Uh oh!

Eruis2579 commented Jan 30, 2026

Uh oh!

Eruis2579 commented Feb 2, 2026

Uh oh!

Eruis2579 commented Feb 2, 2026

Uh oh!

Eruis2579 commented Feb 3, 2026

Uh oh!

Eruis2579 commented Feb 4, 2026

Uh oh!

Eruis2579 commented Feb 4, 2026

Uh oh!

Eruis2579 commented Feb 5, 2026

Uh oh!

Eruis2579 commented Feb 8, 2026

Uh oh!

Weiko left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Eruis2579 commented Feb 13, 2026

Uh oh!

Eruis2579 commented Feb 13, 2026

Uh oh!

Uh oh!

twenty-eng-sync bot commented Feb 13, 2026

Uh oh!

twenty-eng-sync bot commented Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Jan 29, 2026 •

edited

Loading

github-actions bot commented Jan 29, 2026 •

edited

Loading