Pressing "down" key does not select / navigate packages

I typed the package into the search box, I wanted to navigate the search results using the "down" key, but instead of navigating / selecting packages, it seems to be selecting all focusable elements. I would expect the "Tab" key to do that not "down" key. The "down" key should select and navigate actual packages.

For example here I would expect this:

Type "tooltip" into search
Press "down" key -> select first package "tooltip"
Press "down" again -> select next package "rc-tooltip"
Press "down" again -> select next one "react-tooltip"

Screencast:

Screencast.From.2026-02-06.09-40-35.mp4

I just noticed something similar on the compare page, even though the search box displays a list with options below it, there is no way to use the arrow keys to select one of the options.
Or should this be a separate issue, since the components are not related to each other?

Seems like this is a little greedy?

npmx.dev/app/pages/search.vue

Lines 515 to 534 in 3cf7fef

    
           /** 
        
            * Get all focusable result elements in DOM order (suggestions first, then packages) 
        
            */ 
        
           function getFocusableElements(): HTMLElement[] { 
        
             const suggestions = Array.from( 
        
               document.querySelectorAll<HTMLElement>('[data-suggestion-index]'), 
        
             ).sort((a, b) => { 
        
               const aIdx = Number.parseInt(a.dataset.suggestionIndex ?? '0', 10) 
        
               const bIdx = Number.parseInt(b.dataset.suggestionIndex ?? '0', 10) 
        
               return aIdx - bIdx 
        
             }) 
        
             const packages = Array.from(document.querySelectorAll<HTMLElement>('[data-result-index]')).sort( 
        
               (a, b) => { 
        
                 const aIdx = Number.parseInt(a.dataset.resultIndex ?? '0', 10) 
        
                 const bIdx = Number.parseInt(b.dataset.resultIndex ?? '0', 10) 
        
                 return aIdx - bIdx 
        
               }, 
        
             ) 
        
             return [...suggestions, ...packages] 
        
           }

I also wonder if this shortcut shouldn’t become active until the user presses Enter which unfocuses the search field. That’s how it works in search engines. I also might be saying this selfishly because, as a (n)vim user, I also want j and k to go through the results (and that wouldn’t make sense unless you unfocused the search field).

fix: arrow key navigation in search skips keyword buttons

Navigation Menu

Repository navigation

Pressing "down" key does not select / navigate packages #1078

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	/**
	* Get all focusable result elements in DOM order (suggestions first, then packages)
	*/
	function getFocusableElements(): HTMLElement[] {
	const suggestions = Array.from(
	document.querySelectorAll<HTMLElement>('[data-suggestion-index]'),
	).sort((a, b) => {
	const aIdx = Number.parseInt(a.dataset.suggestionIndex ?? '0', 10)
	const bIdx = Number.parseInt(b.dataset.suggestionIndex ?? '0', 10)
	return aIdx - bIdx
	})
	const packages = Array.from(document.querySelectorAll<HTMLElement>('[data-result-index]')).sort(
	(a, b) => {
	const aIdx = Number.parseInt(a.dataset.resultIndex ?? '0', 10)
	const bIdx = Number.parseInt(b.dataset.resultIndex ?? '0', 10)
	return aIdx - bIdx
	},
	)
	return [...suggestions, ...packages]
	}

Pressing "down" key does not select / navigate packages #1078

Description

Activity

Codefoxdev commented on Feb 6, 2026

knowler commented on Feb 7, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions