feat: add keyboard navigation to compare page package search

[iiio2]

most probably resolves #1346

In the compare page, we search packages to compare. Now, suppose we search "nuxt". So it provides you a list of suggestion. If we want to select any package from the suggestion list we need to use our mouse or touchpad to select a package from the suggestion list. It would be really nice if we can use keyboard page up and page down to select the packages from the suggestion list. That is the new feature of keyboard navigation. We can now select packages from the suggestion list using page up and page down in the keyboard.

Before: We get suggestion of packages and if we want to select we need to use mouse or touchpad.

After: We can now pick packages using page up or page down in the keyboard

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Feb 11, 2026 3:49pm
npmx.dev	Ready	Preview, Comment	Feb 11, 2026 3:49pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Feb 11, 2026 3:49pm

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Compare/PackageSelector.vue	43.66%	32 Missing and 8 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds full keyboard navigation to PackageSelector.vue: introduces highlightedIndex, listRef and PAGE_JUMP; constructs navigableItems (No-Dependency + filtered results) with an index offset; handles ArrowUp/ArrowDown, PageUp/PageDown, Enter (select highlighted or fall back to exact-match/easter-egg), and Escape (clear input/reset highlight); resets highlightedIndex on input changes and package add; auto-scrolls highlighted item into view; renders No-Dependency and results as navigable items with mouseenter updating highlight.

Possibly related PRs

• feat: compare page search package add esc keyboard event #1333: Modifies PackageSelector.vue to add Escape-key handling that overlaps this PR’s Escape behaviour.
• fix(ui): prevent compare with non-existing package #1207: Changes Enter-key selection and No-Dependency handling in PackageSelector.vue, directly related to this PR’s selection logic.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description directly relates to the changeset, explaining the addition of keyboard navigation to the package search functionality on the compare page.
Linked Issues check	✅ Passed	The PR implements keyboard navigation (arrow keys, page up/down, enter, escape) enabling users to navigate and select search results without a mouse, fully addressing issue #1346 requirements.
Out of Scope Changes check	✅ Passed	All changes are scoped to the PackageSelector component and directly support keyboard navigation functionality. No unrelated alterations were introduced.

_{✏️ 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

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

app/components/Compare/PackageSelector.vue (2)

142-145: Consider optional chaining instead of non-null assertion for safer array access.

Although the bounds check on line 142 ensures the index is valid, using the non-null assertion (!) could mask issues if the logic changes. Optional chaining provides an extra safety net.

🛡️ Suggested safer access pattern

       // If an item is highlighted, select it
       if (highlightedIndex.value >= 0 && highlightedIndex.value < count) {
-        addPackage(items[highlightedIndex.value]!.name)
+        const selectedItem = items[highlightedIndex.value]
+        if (selectedItem) {
+          addPackage(selectedItem.name)
+        }
         return
       }

---

111-117: Consider: ArrowUp from no selection could navigate to the last item.

Currently, when no item is highlighted (highlightedIndex === -1), ArrowDown selects the first item, but ArrowUp does nothing. For a more symmetrical keyboard experience, ArrowUp could wrap to the last item.

♻️ Optional: wrap ArrowUp to last item

     case 'ArrowUp':
       e.preventDefault()
       if (count === 0) return
-      if (highlightedIndex.value > 0) {
+      if (highlightedIndex.value === -1) {
+        highlightedIndex.value = count - 1
+      } else if (highlightedIndex.value > 0) {
         highlightedIndex.value--
       }
       break

---

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

[whitep4nth3r]

This works really nicely!

[iiio2]

Thanks @whitep4nth3r . 😊