feat: add click-outside handler to SearchBar dropdown

[hardikagarwal23]

Summary

Improve the SearchBar UX by adding click‑outside behavior for the suggestions dropdown and refining the focus visuals.

Changes proposed

• Added click‑outside handler for the dropdown in src/User/components/SearchBar/SearchBar.jsx (used by src/User/components/Navbar/UserNavbar.jsx)
• Used useRef, useCallback, and useEffect with proper cleanup
• Improved focus styling on the pill container (kept input itself clean)

Screenshots

Before:
Focus shadow/outline appeared on input click

After:
Clean focus state without outline

Note to reviewers

Scope: Applies to the SearchBar used in the User Navbar.
Non‑goal: Other SearchBars (Home/Dashboard/Admin) are separate components and unchanged.
Follow‑up: We can consolidate SearchBars into a single shared component in a separate PR for uniform behavior.

Summary by CodeRabbit

• New Features

  • SearchBar now displays results in a dropdown format with improved interactions.
  • Search automatically closes when clicking outside the component.

• Style

  • Enhanced visual feedback with improved focus and transition styling for the input area.

[vercel]

@hardikagarwal23 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Enhanced the SearchBar component with ref management, outside-click detection, and dropdown result rendering. The component now intelligently closes the results list when users click outside and provides unified event handling while maintaining the existing public API.

Changes

Cohort / File(s)	Summary
SearchBar Enhancement src/User/components/SearchBar/SearchBar.jsx	Added ref-based outside-click detection to close results dropdown, unified result rendering into a single flow, and introduced focus/transition styling for the input container. Event listeners are now conditionally managed based on search results presence.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Added functionality to Searchbar #2166 — Directly modifies the same SearchBar component to add interactive dropdown behavior for search results.
• Redesigned Navbar and making it responsive #1740 — Related SearchBar modifications including imports and styling adjustments in the same file path.
• Navbar is updated with proper alignment and drop shadow #2694 — Updates SearchBar usage and positioning in Navbar component, affected by this SearchBar implementation change.

Suggested labels

FrontEnd, level2

Suggested reviewers

• codervivek5

Poem

🐰 A SearchBar hops with newfound grace,
Outside clicks? Gone without a trace!
Dropdowns dance and refs align,
This rabbit's work shines oh-so-fine! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change - adding a click-outside handler to the SearchBar dropdown, which is the primary feature introduced in this PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description includes all required template sections with clear explanations of changes, visual before/after comparisons, and notes for reviewers.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

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