fix: search input initialization and re-focus bug

[nnecec]

🔗 Linked issue

no issue

🧭 Context

no context

📚 Description

Fixed with Cursor, and reviewed by me.

3.19.1.mp4

Fixed two issues:

1. After auto-focus on homepage, rapidly typed characters were being reset.
2. Auto-focus was not triggered when redirect to homepage via logo click from other pages.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 19, 2026 10:59am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 19, 2026 10:59am

[codecov]

Codecov Report

❌ Patch coverage is 36.84211% with 24 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/useGlobalSearch.ts	36.84%	16 Missing and 8 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request enhances the useGlobalSearch composable to improve URL and state synchronisation on the client side. Changes include introducing a function to read focused search input values, extending state initialisation to preserve user input before hydration, modifying the URL watcher to check route name and input focus state, normalising state update logic, handling navigation to the home route with focus management, and adding an onMounted recovery step for instant search preservation. Lines changed: +71/−5.

Possibly related PRs

• fix: missed input parts on quick search #1394: Introduces global search state management to prevent route-driven state overwrites, complementing the client-side focus-aware synchronisation enhancements.
• fix: search restore #1450: Modifies URL→state syncing logic in the same composable by adding guards for falsy values, which is extended further by this PR's focus and route-name checks.
• perf: search improvements #1431: Updates the same composable alongside a global search manager introduction, with overlapping changes to client-side syncing and focus handling.

Suggested labels

front

Suggested reviewers

• danielroe
• ghostdevv

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly identifies and addresses two specific bugs related to search input initialization and re-focus behavior on the homepage.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.

[coderabbitai]

🧹 Nitpick comments (1)

app/composables/useGlobalSearch.ts (1)

60-67: Consider extracting focused input detection into a reusable helper.

The logic for detecting whether a search input is focused (lines 60-67) duplicates the pattern from getFocusedSearchInputValue (lines 22-24). Extracting a small isSearchInputFocused() helper would improve maintainability.

♻️ Proposed refactor

+const isSearchInputFocused = (): boolean => {
+  if (!import.meta.client) return false
+  const active = document.activeElement
+  if (!(active instanceof HTMLInputElement)) return false
+  return active.type === 'search' || active.name === 'q'
+}
+
 const getFocusedSearchInputValue = () => {
-  if (!import.meta.client) return ''
-
-  const active = document.activeElement
-  if (!(active instanceof HTMLInputElement)) return ''
-  if (active.type !== 'search' && active.name !== 'q') return ''
-  return active.value
+  if (!isSearchInputFocused()) return ''
+  return (document.activeElement as HTMLInputElement).value
 }

Then in the watcher:

-     if (import.meta.client) {
-       const active = document.activeElement
-       if (
-         active instanceof HTMLInputElement &&
-         (active.type === 'search' || active.name === 'q')
-       ) {
-         return
-       }
-     }
+     if (isSearchInputFocused()) return

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ecd4a617-b5c7-4a12-93b5-29da7a115b93

📥 Commits

Reviewing files that changed from the base of the PR and between 5d8fcf5 and 399f570.

📒 Files selected for processing (1)

• app/composables/useGlobalSearch.ts