Skip to content

fix(ui): keep Sheet close handlers current before passive effects flush - #3629

Merged
BigSimmo merged 2 commits into
mainfrom
fix/sheet-close-ref-layout-effect
Oct 17, 2026
Merged

BigSimmo merged 2 commits into
mainfrom
fix/sheet-close-ref-layout-effect

Conversation

@BigSimmo

@BigSimmo BigSimmo commented Oct 17, 2026 •

Copy link
Copy Markdown
Owner

User description

Summary

  • Sheet updated onCloseRef/requestCloseRef in a passive useEffect. A Close/swipe/back that landed after a commit but before the passive flush called the previous render's onClose (stale closure).
  • Seen in CI on chore(ledger): reconcile 31 inbox requests; queue #8Y9169/#WWTRM5 wording fixes and the #8CKX6F ruling (replaces #3624) #3625 (tests/admin-renewed-sheet.dom.test.tsx › "clears the form once a save has actually completed", line 138): Close ran AdminRenewedSheet's pre-save handleClose, so the saved state was not reset.
  • Fix: update the refs in useLayoutEffect. Regression test in tests/sheet.dom.test.tsx clicks Close from a MutationObserver right after the commit.

Areas touched: Design system

Verification

  • Checks run: new freshness test fails without the fix (expected [ +0 ] to deeply equal [ 1 ]) and passes with it; vitest run tests/sheet*.test.tsx tests/admin-*.dom.test.tsx → Test Files 28 passed (28), Tests 352 passed (352); eslint clean; push guard typecheck passed.

Risk and rollout

  • Risk: low; ref assignment moves from passive to layout timing, no behaviour change otherwise.
  • Rollback: revert this commit.
  • Provider or production effects: None

Notes

  • No checks, thresholds or tests loosened.

Summary by cubic

Fixes a stale-closure bug where Sheet's Close button, swipe, and back handlers could call the previous render's onClose when a click landed right after a commit but before passive effects flushed.

Now updates the close handler refs in an isomorphic layout effect (useLayoutEffect on the client, useEffect on the server), and adds a regression test that reproduces the race by clicking Close from a MutationObserver immediately after a commit.

Written for commit a6906d3. Summary will update on new commits.

View guided diff Turn on auto-fix


CodeAnt-AI Description

Keep sheet close actions in sync with the latest state

What Changed

  • Close, swipe, and back actions now use the latest close behavior immediately after a sheet updates
  • Prevents closing a sheet after saving from running outdated behavior and skipping a reset

Impact

✅ Saved sheet state resets on close
✅ Close actions honor the latest state

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

Summary by CodeRabbit

  • Bug Fixes
    • The Sheet’s Close action now uses the most recently updated close behavior, including when clicked immediately after an update. This prevents the action from relying on an outdated close handler during the transition between an update and the next effect.

The Close button, swipe and back handlers read onCloseRef/requestCloseRef, which
were updated in a passive useEffect. A click landing after a commit but before
the passive flush called the previous render's onClose. AdminRenewedSheet hit
this in CI (admin-renewed-sheet.dom.test.tsx 'clears the form once a save has
actually completed'): Close ran the pre-save handleClose and skipped the reset.
Update the refs in a layout effect; add a deterministic regression test that
fails without the fix.
@BigSimmo
BigSimmo enabled auto-merge (squash) October 17, 2026 18:16

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BigSimmo has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

@supabase

supabase Bot commented Oct 17, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@codeant-ai

codeant-ai Bot commented Oct 17, 2026 •

Copy link
Copy Markdown

🤖 CodeAnt AI — Review Status

Status Commit Started (UTC) Finished (UTC)
✅ Reviewed your PR c48a736 Oct 17, 2026 · 18:16 18:21

@codeant-ai

codeant-ai Bot commented Oct 17, 2026

Copy link
Copy Markdown

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@coderabbitai

coderabbitai Bot commented Oct 17, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository: BigSimmo/PsychSift/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Team
  • Run ID: 6c4961dd-1504-4896-ae24-56a9a8f28d49
📥 Commits

Reviewing files that changed from the base of the PR and between 2958a3d and a6906d3.

📒 Files selected for processing: 2
  • src/components/ui/sheet.tsx
  • tests/sheet.dom.test.tsx

Included review availability: This review used your included allowance. 0 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 2 reviews per hour.

📝 Walkthrough

The Sheet now refreshes its close-handler refs in an isomorphic layout effect. A regression test checks that clicking Close after a committed update uses the latest callback.

Changes: Sheet close-handler freshness

Layer / File(s) Summary
Refresh close-handler refs before passive effects
src/components/ui/sheet.tsx, tests/sheet.dom.test.tsx
The Sheet uses useLayoutEffect in the browser and useEffect when window is unavailable to refresh its close-handler refs. The regression test verifies that Close uses the latest callback after an update commits.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: cursoragent

Merge Risk: ⚪ Minimal · up to a6906

The close-handler freshness change is mergeable after normal checks; no actionable risk was established.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main change: keeping Sheet close handlers current before passive effects flush.
Description check Passed The description covers the summary, affected area, verification results, risk, rollback, production effects, and notes. It provides clear context for the stale-closure fix and regression test.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
  • Fix all pre-merge checks with AI
✨ Finishing Touches: 💡 1
📝 Generate docstrings: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 17, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-17T18:18:09.262604Z c48a736 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@claude

claude Bot commented Oct 17, 2026 •

Copy link
Copy Markdown
Contributor

Claude encountered an error after 2s —— View job


I'll analyze this and get back to you.

@codeant-ai codeant-ai Bot added the size:M This PR changes 30-99 lines, ignoring generated files label Oct 17, 2026
@qodo-code-review

Copy link
Copy Markdown
Contributor

PR Summary by Qodo

Keep Sheet close handlers current before passive effects flush

🐞 Bug fix 🧪 Tests 🕐 20-40 Minutes

Grey Divider

AI Description

• Refresh Sheet close-handler refs during layout to prevent stale callbacks immediately after a
 commit.
• Add a regression test that clicks Close before passive effects flush.
Diagram

graph TD
  State["Caller state"] --> Commit["Sheet commit"] --> Layout["Layout effect"] --> Refs["Close refs"] --> Handler["Latest onClose"]
  Actions["Dismiss actions"] --> Refs
Loading
High-Level Assessment

Keep the existing ref-based dismissal paths and refresh their callbacks in a layout effect. Replacing individual event handlers would not address all dismissal paths as directly.

Files changed (2) +58 / -2

Bug fix (1) +6 / -1
sheet.tsxRefresh close callbacks in a layout effect +6/-1

Refresh close callbacks in a layout effect

• Moves onCloseRef and requestCloseRef updates from a passive effect to a layout effect. Dismissals immediately after a commit now use callbacks from the latest render.

src/components/ui/sheet.tsx

Tests (1) +52 / -1
sheet.dom.test.tsxCover dismissal before passive effects flush +52/-1

Cover dismissal before passive effects flush

• Adds a regression test that updates the Sheet callback, then clicks Close from a MutationObserver immediately after the DOM commit. It asserts that the latest callback runs.

tests/sheet.dom.test.tsx

@codeant-ai

codeant-ai Bot commented Oct 17, 2026 •

Copy link
Copy Markdown

🏁 CodeAnt Quality Gate Results

Commit: a6906d39
Scan Time: 2026-10-17 18:35:50 UTC

✅ Overall Status: PASSED

Quality Gate Details

Quality Gate Status Details
Secrets ✅ PASSED 0 secrets found
Duplicate Code ✅ PASSED 0.0% duplicated
SAST ✅ PASSED No security issues
Bugs ✅ PASSED Rating S: No bugs
IAC ✅ PASSED No IAC issues

View Full Results

gitar-bot[bot]
gitar-bot Bot previously approved these changes Oct 17, 2026

@gitar-bot gitar-bot Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gitar has auto-approved this PR (configure)

@qodo-code-review

qodo-code-review Bot commented Oct 17, 2026 •

Copy link
Copy Markdown
Contributor

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

Grey Divider


Action required

No findings for this group


Remediation recommended

No findings for this group


Informational

No findings for this group

Grey Divider


Resolved findings

1. Server logs gain Sheet warnings ✓ Resolved
Description
The new unconditional useLayoutEffect in Sheet assigns refs but cannot run during server
rendering, so React emits its server-side layout-effect warning. Any server-rendered page that
includes a Sheet, including closed sheets rendered by parent components, adds this warning to logs
and SSR test output.
Code

src/components/ui/sheet.tsx[R201-205]

+  // Layout effect, not a passive one: the Close button, swipe and back handlers
+  // read these refs, and a click that lands after a commit but before passive
+  // effects flush would otherwise call the previous render's onClose (a stale
+  // closure — e.g. a sheet that had just saved would skip its own reset).
+  useLayoutEffect(() => {
Relevance

●●● Strong

SSR and hydration warnings are treated as actionable; useLayoutEffect should use an isomorphic
server-safe wrapper.

PR-#2410
PR-#3152
PR-#2929

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
The changed module is a client component but now invokes useLayoutEffect unconditionally. A
representative caller is also a client component that renders Sheet regardless of whether it is
open, so server rendering can execute this hook for the component tree.

src/components/ui/sheet.tsx[1-7]
src/components/ui/sheet.tsx[201-208]
src/components/admin/admin-setup-sheet.tsx[1-6]
src/components/admin/admin-setup-sheet.tsx[73-82]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`Sheet` now calls `useLayoutEffect` unconditionally for ref assignment, but this client component can still be rendered on the server. React cannot execute layout effects during SSR and emits a warning for every rendered `Sheet`.

## Fix Focus Areas
- src/components/ui/sheet.tsx[201-208]

## Recommended Fix
Define or reuse an isomorphic layout-effect hook that uses `useLayoutEffect` in the browser and `useEffect` during SSR, then use it for the ref assignments. Preserve synchronous browser-side updates so post-commit interactions still observe the latest handlers without adding SSR warnings.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Context sources
❌ Tickets: failed to load — Ticket collection could not establish complete evidence
✅ Compliance rules (platform): 9 rules
✅ Skills: 5 invoked
  accessibility-review
  frontend-architecture-review
  testing-review
  code-quality-review
  review
✅ Cross-repo context — repo relationships
✅ REVIEW.md
Review mode: Auto: 🚀 Fast: Localized timing fix with focused regression coverage and low blast radius.

Grey Divider

Tip of the day
💡 Did you know, you can see how risky a PR is at a glance with blast radius labels

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Qodo Logo

Comment thread src/components/ui/sheet.tsx Resolved
@qodo-code-review

Copy link
Copy Markdown
Contributor

Qodo Fixer

✅ Committed (1) · ☑ Fixed (1)

Grey Divider

Commits pushed directly to this PR — no separate fix PR opened.

Process — 1 fixed
  • ☑ Fixed: Server logs gain Sheet warnings

@gitar-bot gitar-bot Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gitar has auto-approved this PR (configure)

@gitar-bot

gitar-bot Bot commented Oct 17, 2026

Copy link
Copy Markdown
Contributor
Code Review ✅ Approved

🟡 Medium risk · Moving Sheet close-handler refs to a layout effect changes close timing; stale callbacks could otherwise skip resetting saved state after a save.

Moves Sheet close-handler ref updates from useEffect to an isomorphic layout effect so Close, swipe, and back actions always invoke the latest onClose after a commit. Adds a regression test that clicks Close from a MutationObserver right after the commit. No issues found.

Verification

Rules No rules evaluated

Functional validation Not enabled

Set up

Auto-approval Approved

For more verification details, comment gitar display:verbose.

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing compact verification results.

Comment with these commands to change the behavior for this request:

Auto-apply Compact
gitar auto-apply:on         
gitar display:verbose         

Important

Your trial ends in 4 days — upgrade now to keep code review, CI analysis, auto-apply, custom automations, and more.

Was this helpful? React with 👍 / 👎 | Gitar

@codeant-ai

codeant-ai Bot commented Oct 17, 2026

Copy link
Copy Markdown

CodeAnt PR Risk: Low Risk

  • The PR appears safe to merge; the sheet updates close-handler refs during layout effects to avoid stale callbacks.
  • A regression test checks that closing immediately after a commit calls the latest handler.

Assessed commit: a6906d394993

@BigSimmo
BigSimmo merged commit b7db862 into main Oct 17, 2026
45 checks passed
@BigSimmo
BigSimmo deleted the fix/sheet-close-ref-layout-effect branch October 17, 2026 18:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M This PR changes 30-99 lines, ignoring generated files 🟡 Small blast radius 🕐 20-40 Minutes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant