feat: enter key open the first package when searching

[kalu5]

feat #916

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 5, 2026 10:12am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 5, 2026 10:12am
npmx-lunaria	Ignored		Feb 5, 2026 10:12am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Keyboard-driven navigation for search results was added. A programmatic navigateToPackage was introduced, along with a pendingEnterQuery state to hold an Enter-typed query pending asynchronous results. handleResultsKeydown was changed to immediately navigate when Enter is pressed and the top result exactly matches the input; otherwise it stores the input in pendingEnterQuery. A watcher on displayResults triggers navigation when results arrive and the first result matches the pending query. The Enter-key flow now prefers immediate navigation for exact matches and falls back to deferred navigation via the watcher for async results.

🚥 Pre-merge checks | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The pull request description 'feat #916' is minimal but directly references a feature issue and relates to the changeset of keyboard-driven navigation for search results.	Expand the description to explain what feature #916 implements, why it was changed, and how the Enter key behaviour now works for users.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

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

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/pages/search.vue (1)

560-583: Avoid overlapping polling timers on repeated Enter presses.

Each Enter press starts a new interval/timeout pair. If users press Enter multiple times quickly, timers stack and keep resetting the debounced navigation. Consider reusing a single timer pair.

Proposed refactor

+let waitSearchResultInterval: ReturnType<typeof setInterval> | null = null
+let waitSearchResultTimeout: ReturnType<typeof setTimeout> | null = null
+
+function clearSearchResultTimers() {
+  if (waitSearchResultInterval) clearInterval(waitSearchResultInterval)
+  if (waitSearchResultTimeout) clearTimeout(waitSearchResultTimeout)
+  waitSearchResultInterval = null
+  waitSearchResultTimeout = null
+}
+
 function handleResultsKeydown(e: KeyboardEvent) {
   // If the active element is an input and there are results, navigate to the first result
   if (e.key === 'Enter' && document.activeElement?.tagName === 'INPUT') {
+    clearSearchResultTimers()
     // After entering quickly and pressing Enter, find the latest packages
     const latestPackageName = findLatestPackageName()
     // Find successful . navigate to package page
     if (latestPackageName) return navigateToPackage(latestPackageName)
     // Waiting for the latest search results (maximum 1.5 seconds)
-    let waitSearchResultInterval: ReturnType<typeof setInterval> | null
-    function clearSearchResultInterval() {
-      if (waitSearchResultInterval) clearInterval(waitSearchResultInterval)
-      waitSearchResultInterval = null
-    }
     waitSearchResultInterval = setInterval(() => {
       const latestPackageName = findLatestPackageName()
       if (latestPackageName) {
-        clearSearchResultInterval()
+        clearSearchResultTimers()
         return navigateToPackage(latestPackageName)
       }
     }, 100)
 
-    setTimeout(() => {
-      clearSearchResultInterval()
-    }, 1500)
+    waitSearchResultTimeout = setTimeout(() => {
+      clearSearchResultTimers()
+    }, 1500)
   }

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Normalise query comparison to avoid missing exact matches.

The comparison is case‑sensitive and doesn’t trim whitespace, so typing “React ” won’t navigate even if the top result is the exact package.

Proposed fix

 function findLatestPackageName() {
-  const packageName = displayResults.value?.[0]?.package.name
-  if (packageName === query.value) {
+  const packageName = displayResults.value?.[0]?.package?.name
+  const q = query.value.trim().toLowerCase()
+  if (packageName && packageName.toLowerCase() === q) {
     return packageName.split('/')
   }
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	// Find latest package name
	function findLatestPackageName() {
	const packageName = displayResults.value?.[0]?.package.name
	if (packageName === query.value) {
	return packageName.split('/')
	}
	// Find latest package name
	function findLatestPackageName() {
	const packageName = displayResults.value?.[0]?.package?.name
	const q = query.value.trim().toLowerCase()
	if (packageName && packageName.toLowerCase() === q) {
	return packageName.split('/')
	}
	}