Fix : Search modal closes on input focus and search results

[ashishgit10]

Pull Request

Fix: Search box Functionality

1. Fixed the SearchBox Modal Opening and Closing
2. Integrated With Backend
3. Implemented live search with debounce
4. Added fetching products after 3+ characters typed

[Alexandrbig1]

Welcome to Open Code Chicago! 🎉
Thank you for making your first contribution here — we’re glad to have you.

[Alexandrbig1]

Thanks @ashishgit10 — nice work! A few small improvements to polish the UX/design:

• Match the Figma: center the CTA, adjust spacing and font sizes to the design.
• Fix search UX: don’t show “product not found” during the fetch; only display it when the search completes with zero results.
• Input & hover effects: add a subtle box-shadow on input hover/focus and ensure buttons have smooth hover transitions and pointer cursor.
• Product card hover: keep the image scale but add a subtle background and animated underline on the product name (0→100% on hover, hide to the right on leave). Include transitions for smoothness.
• Search loading: show a centered loading indicator when searching (1–2s min visible for feedback).
• Placeholder image: add a default image for products without backend images.
• Close behavior: also close the menu on 'Escape' and when clicking outside the menu (not just the 'X').
• Use the 'X' icon from the design (or a matching icon from react-icons / lucide-react) for the close button.

Overall looks good — small follow-up PRs welcome, I’ll review them.

[Alexandrbig1]

@ashishgit10, congratulations on your merged PR! 🎉 Don’t forget to add yourself as a contributor using our all-contributors bot. You can find instructions in our CONTRIBUTING.md. Thanks again for your contribution!

[ashishgit10]

@all-contributors please add @ashishgit10 for code, bugs, maintenance

[allcontributors]

@ashishgit10

I've put up a pull request to add @ashishgit10! 🎉

[Alexandrbig1]

@ashishgit10, please repost the bot request but include only the code and bugs contributions (no maintenance). Thanks

[ashishgit10]

@all-contributors please add @ashishgit10 for code, bugs.

[allcontributors]

@ashishgit10

@ashishgit10 already contributed before to code, bug

[Alexandrbig1]

Hey @ashishgit10 ,

🎉 Congratulations on your first merged pull request!
You’ve just taken a huge step in your open-source journey — and we’re so excited it happened here at Open Code Chicago × CoreX 💪

To celebrate this milestone, you’ve earned the “First PR Merged” badge on Holopin 🏅
👉 Claim your badge here: Claim Badge

Once claimed, you can proudly showcase it on your GitHub profile, Holopin board, or share it on LinkedIn to mark your first contribution to the open-source world 🌟

Keep contributing, keep growing, and welcome to the Open Code Chicago community! 🚀
— Open Code Chicago Team

[ashishgit10]

Thank you so much @Alexandrbig1 for the recognition!☺️
I truly appreciate the opportunity to contribute to Open Code Chicago × CoreX.
It feels great to have my first pull request merged, and I’m excited to continue learning and contributing to the community.
Thanks again for the badge and the warm welcome!🙌
And I wish you a Happy Diwali!! 🎇 🪔 from India🇮🇳😊

[Alexandrbig1]

@ashishgit10, thank you so much for your contribution!