Skip to content

fix(desktop): stop new-project modal from closing on open#4192

Merged
saddlepaddle merged 1 commit into
mainfrom
fix-create-project-modal
May 7, 2026
Merged

fix(desktop): stop new-project modal from closing on open#4192
saddlepaddle merged 1 commit into
mainfrom
fix-create-project-modal

Conversation

@saddlepaddle
Copy link
Copy Markdown
Collaborator

@saddlepaddle saddlepaddle commented May 7, 2026

Summary

  • The "Create new project" entry in the v2 sidebar's add-repository dropdown sometimes opened the modal and instantly closed it. The dropdown's closing pointerup was racing the dialog and firing onPointerDownOutside on it.
  • The shared Dialog wrapper (packages/ui/src/components/ui/dialog.tsx) defaults to modal={false}, so any outside pointer event dismisses it. Pass modal on NewProjectModal so Radix renders an overlay that catches the stray pointerup; outside-click-to-close still works via the dimmed overlay.
  • Defense-in-depth: add onCloseAutoFocus={(e) => e.preventDefault()} on the dropdown content (matches DashboardSidebarWorkspaceContextMenu.tsx:83, DashboardSidebarSectionContextMenu.tsx:25, etc.) so focus doesn't snap back to the trigger as the dialog opens.

Test plan

  • Open the v2 sidebar's add-repository dropdown (folder+ icon) and click "Create new project" — modal stays open every time.
  • Repeat in the collapsed sidebar variant.
  • Click the dimmed overlay outside the modal — modal still closes.
  • Press Escape / click Cancel / click the X — all still close as before.

Summary by cubic

Fixes the “Create new project” modal closing immediately when opened from the Add repository dropdown in the v2 sidebar. The modal now stays open; clicking the overlay or pressing Escape still closes it.

  • Bug Fixes
    • Set modal on the Dialog in NewProjectModal so the overlay absorbs the dropdown’s trailing pointerup.
    • Added onCloseAutoFocus={(e) => e.preventDefault()} to DropdownMenuContent (both sidebar variants) to avoid focus snapping back to the trigger.

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

Summary by CodeRabbit

  • Bug Fixes
    • Improved modal behavior during project creation workflow
    • Fixed auto-focus behavior in the dashboard sidebar dropdown menu for a smoother user experience

The Add Repository dropdown's closing pointerup was racing the
NewProjectModal's Dialog and firing onPointerDownOutside before the
modal had a chance to settle, dismissing it instantly. The shared
Dialog wrapper defaults to modal={false}, so any outside pointer event
closes the dialog.

Pass modal to NewProjectModal so the overlay catches the stray event,
and add onCloseAutoFocus={preventDefault} on the dropdown content to
prevent focus from snapping back to the trigger as the dialog opens.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 7, 2026

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 11512f41-2b4b-44cc-a304-02dbcf9ec8e1

📥 Commits

Reviewing files that changed from the base of the PR and between cd55568 and ef30a76.

📒 Files selected for processing (2)
  • apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/AddRepositoryModals/components/NewProjectModal/NewProjectModal.tsx
  • apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarHeader/DashboardSidebarHeader.tsx

📝 Walkthrough

Walkthrough

This PR refines UI component focus and modal behavior across the dashboard. NewProjectModal's Dialog now includes the modal prop for improved presentation semantics. DashboardSidebarHeader's dropdown menus in both collapsed and expanded layouts now prevent default autofocus behavior on close via onCloseAutoFocus handlers.

Changes

Dialog Modal Configuration

Layer / File(s) Summary
Dialog Modal Prop
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/AddRepositoryModals/components/NewProjectModal/NewProjectModal.tsx
Dialog component now includes modal prop alongside open and onOpenChange props.

Dropdown Menu Focus Management

Layer / File(s) Summary
Autofocus Prevention
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarHeader/DashboardSidebarHeader.tsx
Both collapsed and expanded sidebar dropdown menus updated with onCloseAutoFocus={(event) => event.preventDefault()} to suppress default focus restoration on close.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A modal now truly modal, standing tall,
Dropdowns dismiss without a call,
Focus flows smooth as spring's first breeze,
Dialog dialogs with newfound ease! ✨

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix-create-project-modal

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@saddlepaddle saddlepaddle merged commit 617cebe into main May 7, 2026
9 of 10 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 7, 2026

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

  • ✅ Neon database branch

Thank you for your contribution! 🎉

@greptile-apps
Copy link
Copy Markdown

greptile-apps Bot commented May 7, 2026

Greptile Summary

This PR fixes a race condition where the "Create new project" dialog would immediately close after opening because the dropdown's closing pointerup event fired onPointerDownOutside on the non-modal dialog. The fix enables Radix's modal overlay on NewProjectModal to capture stray pointer events, and adds onCloseAutoFocus prevention on both dropdown content instances as defense-in-depth.

  • NewProjectModal.tsx: Adds modal (i.e. modal={true}) to the Dialog root so Radix renders a blocking overlay, preventing the dropdown's closing pointer events from dismissing the dialog the moment it opens.
  • DashboardSidebarHeader.tsx: Adds onCloseAutoFocus={(event) => event.preventDefault()} to both the collapsed and expanded sidebar dropdown contents, matching the established pattern in context menu components, so focus doesn't snap back to the dropdown trigger as the dialog opens.

Confidence Score: 5/5

Safe to merge — two small, targeted changes that fix a real UX regression with no side effects on other flows.

Both changes are minimal and well-scoped. The modal prop on NewProjectModal is the correct Radix primitive to use for a blocking overlay, and the onCloseAutoFocus pattern is already established in at least two other context menu components in the codebase. The overlay still allows outside-click-to-close, and all other dismiss paths (Escape, Cancel, X button) remain untouched. No logic was restructured and no shared components were changed.

No files require special attention.

Important Files Changed

Filename Overview
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/AddRepositoryModals/components/NewProjectModal/NewProjectModal.tsx Adds modal prop to the Dialog root to enable Radix's blocking overlay and fix the race condition with the dropdown's closing pointer event.
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarHeader/DashboardSidebarHeader.tsx Adds onCloseAutoFocus prevention to both dropdown content instances (collapsed and expanded variants) to prevent focus returning to the trigger when the dialog opens.

Sequence Diagram

sequenceDiagram
    participant User
    participant Dropdown as DropdownMenu
    participant Store as add-repository-modal store
    participant Modal as NewProjectModal (Dialog)

    Note over Dropdown,Modal: Before fix — race condition
    User->>Dropdown: click "Create new project"
    Dropdown->>Store: openNewProject()
    Dropdown-->>Dropdown: closes (fires pointerup)
    Store-->>Modal: "open=true → Dialog mounts (modal=false)"
    Dropdown->>Modal: pointerup bubbles → onPointerDownOutside
    Modal-->>Store: handleOpenChange(false) — dialog closes instantly

    Note over Dropdown,Modal: After fix
    User->>Dropdown: click "Create new project"
    Dropdown->>Store: openNewProject()
    Dropdown-->>Dropdown: closes, onCloseAutoFocus prevented
    Store-->>Modal: "open=true → Dialog mounts (modal=true)"
    Note over Modal: Radix overlay blocks all outside pointer events
    Modal-->>Modal: stays open ✓
    User->>Modal: click overlay / Escape / Cancel
    Modal-->>Store: handleOpenChange(false) — dialog closes normally
Loading

Reviews (1): Last reviewed commit: "fix(desktop): stop new-project modal fro..." | Re-trigger Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant