Skip to content

Fix : Search modal closes on input focus and search results#103

Merged
Alexandrbig1 merged 1 commit into
OpenCodeChicago:mainfrom
ashishgit10:fix/search-box-functionality
Oct 10, 2025
Merged

Fix : Search modal closes on input focus and search results#103
Alexandrbig1 merged 1 commit into
OpenCodeChicago:mainfrom
ashishgit10:fix/search-box-functionality

Conversation

@ashishgit10
Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Contributor

@Alexandrbig1 Alexandrbig1 left a comment

Choose a reason for hiding this comment

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

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

@Alexandrbig1 Alexandrbig1 added frontend Tasks related to the frontend (React, Vite, TailwindCSS, UI components, pages) good first issue Good for newcomers hacktoberfest Special issue for Hacktoberfest hacktoberfest-2025 Special issue for Hacktoberfest 2025 hacktoberfest-accepted This label indicates that a contribution has been accepted and counts toward Hacktoberfest rewards. react React components & UI logic tailwind Tailwind CSS & styling labels Oct 10, 2025
@Alexandrbig1 Alexandrbig1 added this to the Hacktoberfest 2025 milestone Oct 10, 2025
@Alexandrbig1 Alexandrbig1 merged commit 492d71b into OpenCodeChicago:main Oct 10, 2025
2 checks passed
@Alexandrbig1
Copy link
Copy Markdown
Contributor

Alexandrbig1 commented Oct 10, 2025

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
Copy link
Copy Markdown
Contributor

@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
Copy link
Copy Markdown
Contributor Author

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

@allcontributors
Copy link
Copy Markdown
Contributor

@ashishgit10

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

@Alexandrbig1
Copy link
Copy Markdown
Contributor

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

@ashishgit10
Copy link
Copy Markdown
Contributor Author

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

@allcontributors
Copy link
Copy Markdown
Contributor

@ashishgit10

@ashishgit10 already contributed before to code, bug

@Alexandrbig1 Alexandrbig1 linked an issue Oct 10, 2025 that may be closed by this pull request
@Alexandrbig1
Copy link
Copy Markdown
Contributor

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
Copy link
Copy Markdown
Contributor Author

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
Copy link
Copy Markdown
Contributor

@ashishgit10, thank you so much for your contribution!

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

Labels

frontend Tasks related to the frontend (React, Vite, TailwindCSS, UI components, pages) good first issue Good for newcomers hacktoberfest Special issue for Hacktoberfest hacktoberfest-2025 Special issue for Hacktoberfest 2025 hacktoberfest-accepted This label indicates that a contribution has been accepted and counts toward Hacktoberfest rewards. react React components & UI logic tailwind Tailwind CSS & styling

Development

Successfully merging this pull request may close these issues.

Search Menu (Header Right-Side)

2 participants