Fix: Quick Add Issue form remains visible on outside click

[khairnarkalpesh]

Description

This merge request fixes a UI bug where the Quick Add Issue Form (used for creating new work items) remains visible when the user clicks outside of it. The expected behavior is for the form to automatically close when a click occurs outside its bounds, consistent with how the Escape key works.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Before

Screen.Recording.2025-06-21.160043.mp4

After

Screen.Recording.2025-06-21.160043.mp4

References

Related Issue

Summary by CodeRabbit

• Refactor
  • Improved form components to use React's forwardRef for better ref handling and compatibility.
  • Updated internal types to remove direct ref props and ensure all quick-add issue forms properly support ref forwarding.
  • Optimized event listener management for outside click detection to improve performance.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

This update refactors several quick-add issue form components to use React's forwardRef for proper ref forwarding, removes the ref property from the form props type, and updates the type mapping for quick-add form components. Additionally, it optimizes a custom hook's effect dependencies for outside click detection.

Changes

Files/Paths	Change Summary
packages/hooks/src/use-outside-click-detector.tsx	Added dependency array to useEffect for optimized event listener management in outside click detection hook.
web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx .../gantt.tsx .../kanban.tsx .../list.tsx .../spreadsheet.tsx	Refactored quick-add form components to use forwardRef for ref forwarding; removed ref from props.
web/core/components/issues/issue-layouts/quick-add/root.tsx	Removed ref property from TQuickAddIssueForm type.
web/ce/components/issues/quick-add/root.tsx	Updated type annotation for QUICK_ADD_ISSUE_FORMS to expect forward-ref components.

Sequence Diagram(s)

sequenceDiagram
  participant ParentComponent
  participant QuickAddForm (forwardRef)
  participant FormElement

  ParentComponent->>QuickAddForm: Render with props and ref
  QuickAddForm->>FormElement: Forward ref to <form>
  ParentComponent->>QuickAddForm: Interact (e.g., submit, focus)
  QuickAddForm->>FormElement: Ref enables direct DOM access

Loading

Possibly related issues

• [bug]: Quick Add Issue form remains visible on outside click #7250: This PR optimizes outside click detection and ref forwarding, addressing the issue where the Quick Add Issue form does not close on outside clicks.

Suggested labels

🌐frontend, 🧹chore

Suggested reviewers

• sriramveeraghanta

Poem

A bunny hops through code so neat,
Ref forwarding now complete!
No more props with sneaky refs,
Just forward, type, and fix what's left.
Outside clicks now work just right—
Forms close softly, day or night.
🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7045a1f and bf9dc0e.

📒 Files selected for processing (8)

• packages/hooks/src/use-outside-click-detector.tsx (1 hunks)
• web/ce/components/issues/quick-add/root.tsx (1 hunks)
• web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx (2 hunks)
• web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx (2 hunks)
• web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx (2 hunks)
• web/core/components/issues/issue-layouts/quick-add/form/list.tsx (2 hunks)
• web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx (2 hunks)
• web/core/components/issues/issue-layouts/quick-add/root.tsx (0 hunks)

💤 Files with no reviewable changes (1)

• web/core/components/issues/issue-layouts/quick-add/root.tsx

🔇 Additional comments (10)

packages/hooks/src/use-outside-click-detector.tsx (1)

28-28: LGTM! Proper dependency array optimization.

Adding the dependency array [ref, callback, useCapture] prevents unnecessary re-attachments of the event listener on every render. The effect will now only re-run when any of these values actually change, which is the correct behavior for this hook.

web/core/components/issues/issue-layouts/quick-add/form/list.tsx (1)

6-7: Excellent forwardRef refactoring for proper ref handling.

The refactoring correctly implements React's forwardRef pattern by:

• Removing ref from props and receiving it as the second parameter
• Forwarding the ref directly to the underlying <form> element
• Maintaining the observer wrapper for MobX reactivity

This enables parent components to access the form element directly for outside click detection functionality.

Also applies to: 34-34

web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx (1)

7-8: Consistent forwardRef implementation.

The refactoring follows the same proper forwardRef pattern as the other form components, ensuring consistency across the codebase. The ref forwarding to the <form> element will enable proper outside click detection.

Also applies to: 35-35

web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx (1)

6-7: Proper forwardRef implementation maintained.

The component correctly implements the forwardRef pattern consistent with the other quick-add form components. The ref forwarding to the form element supports the outside click detection functionality.

Also applies to: 29-29

web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx (1)

6-7: Coordinated forwardRef refactoring completed successfully.

This final form component completes the consistent forwardRef refactoring across all quick-add issue form components. The coordinated changes ensure that:

• All form components use proper React ref forwarding patterns
• Refs are forwarded to the underlying form elements for outside click detection
• MobX reactivity is preserved with the observer wrapper
• Type safety is maintained throughout

This will enable the outside click detection functionality to work properly across all form variants.

Also applies to: 32-32

web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx (4)

1-1: LGTM: Proper forwardRef import added.

The forwardRef import is correctly added to support the ref forwarding pattern.

---

5-6: LGTM: Correct forwardRef implementation.

The component is properly refactored to use React's forwardRef pattern:

• Correct typing with forwardRef<HTMLFormElement, TQuickAddIssueForm>
• ref is now received as the second parameter instead of from props
• Props destructuring updated to remove ref

This change enables proper ref forwarding to the form element for outside click detection.

---

15-15: LGTM: Ref correctly forwarded to form element.

The ref is properly attached to the form element, enabling the parent component's outside click detection to work correctly.

---

32-32: LGTM: Proper forwardRef closure.

The component is correctly closed with the forwardRef pattern.

web/ce/components/issues/quick-add/root.tsx (1)

54-57: LGTM: Type annotation correctly updated for forwardRef components.

The type annotation for QUICK_ADD_ISSUE_FORMS is properly updated to reflect the refactored form components that now use forwardRef. The React.ForwardRefExoticComponent<TQuickAddIssueForm & React.RefAttributes<HTMLFormElement>> type ensures proper type safety for components that accept forwarded refs.

This change aligns with the refactoring of all quick-add form components to support ref forwarding, which is essential for the outside click detection functionality.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.