Skip to content

fix: extract mobile search into separate component to prevent focus loss on keystroke#555

Open
saurabhhhcodes wants to merge 1 commit into
indresh404:mainfrom
saurabhhhcodes:fix/mobile-search-focus
Open

fix: extract mobile search into separate component to prevent focus loss on keystroke#555
saurabhhhcodes wants to merge 1 commit into
indresh404:mainfrom
saurabhhhcodes:fix/mobile-search-focus

Conversation

@saurabhhhcodes

Copy link
Copy Markdown

Description

The mobile search input in the Navbar lost focus after typing the first character because the parent component re-rendered on every setSearchQuery call. Extracted the mobile search overlay into a standalone MobileSearch component with its own local state, so typing no longer triggers a Navbar-wide re-render.

Changes:

  • New src/components/ui/MobileSearch.jsx — self-contained mobile search with its own query state, results dropdown, and navigation handlers
  • Navbar.jsx — replaced inline mobile search markup with MobileSearch component

Fixes #554

GSSoC

…oss on keystroke

The search input inside the Navbar lost focus after typing the first
character on mobile because the parent re-rendered on every state
change. Extracted MobileSearch into its own component with isolated
state so keystrokes no longer trigger a Navbar-wide re-render.
@vercel

vercel Bot commented Jun 16, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ranker-hub Ready Ready Preview, Comment Jun 16, 2026 11:24am

@github-actions github-actions Bot added bug Something isn't working enhancement New feature or request frontend Frontend related changes (HTML/CSS/JS/React) gssoc GirlScript Summer of Code gssoc26 GirlScript Summer of Code 2026 nsoc NSoC NSoC'26 NSoC 2026 pending-review PR is pending review labels Jun 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working enhancement New feature or request frontend Frontend related changes (HTML/CSS/JS/React) gssoc GirlScript Summer of Code gssoc26 GirlScript Summer of Code 2026 nsoc NSoC NSoC'26 NSoC 2026 pending-review PR is pending review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Search bar in Navbar loses focus after typing the first character on mobile

1 participant