Combobox + NextJS Link doesn't work with keyboard navigation (Enter)

[Strijdhagen]

Hi All,

I'm using the following workaround this use Combobox with Link from NextJS, which works great when using mouse navigation: https://headlessui.com/react/menu#integrating-with-next-js

However, when using keyboard navigation, "Enter" specifically, it selects the correct choice but it doesn't follow the link.
I use the TailwindUI Combobox with secondary text in this example: https://tailwindui.com/components/application-ui/forms/comboboxes#component-0834ed9ce704a78cc0045ef92f4af723.

Does anyone have a solution for this>

            {filteredPeople.map((person) => (
              <MyLink 
              href={"}>
                <Combobox.Option
                key={person.name}
                value={person}
                className={({ active }) =>
                  classNames(
                    'relative cursor-default select-none py-2 pl-3 pr-9',
                    active ? 'bg-slate-600 text-white' : 'text-slate-900'
                  )   
                
                }
              >
                
                {({ active, selected }) => (
                  <>
                    <div className="flex">
                      <span className={classNames('truncate', selected && 'font-semibold')}>{person.name}</span>
                      <span
                        className={classNames(
                          'ml-2 truncate text-slate-500',
                          active ? 'text-slate-200' : 'text-slate-500'
                        )}
                      >
                        {person.name}
                      </span>
                    </div>
                    
                    {selected && (
                      <span
                        className={classNames(
                          'absolute inset-y-0 right-0 flex items-center pr-4',
                          active ? 'text-white' : 'text-slate-600'
                        )}
                      >
                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
                      </span>
                    )}
                  </>
                )}
              </Combobox.Option>
            </MyLink>

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

Please attach a minimal reproduction repo so that we can take a look.

[RobinMalfait]

It also looks like you are mixing concerns here a bit.

A Menu can be used for actions and links, however a Combobox is used for data, that's why you can select a value from the list.

Instead, I would recommend you to redirect to the correct location based on the value, inside the onChange function. For Next.js that could look like this:

import { useState } from 'react'
import { useRouter } from 'next/router'
import { Combobox } from '@headlessui/react'

const people = [
  'Durward Reynolds',
  'Kenton Towne',
  'Therese Wunsch',
  'Benedict Kessler',
  'Katelyn Rohan',
]

function MyCombobox() {
  const router = useRouter()
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Combobox value={selectedPerson} onChange={(person) => router.push(`/people/${person.id}`)}>
      <Combobox.Input onChange={(event) => setQuery(event.target.value)} />
      <Combobox.Options>
        {filteredPeople.map((person) => (
          <Combobox.Option key={person} value={person}>
            {person}
          </Combobox.Option>
        ))}
      </Combobox.Options>
    </Combobox>
  )
}

[Strijdhagen]

Thanks so much Robin, this has worked for me!
Do you know I would be able to combine router.push with setselectedPerson, so I can show my user that the selected value is being loaded

[AnnaYuS]

Just wondering if the suggested solution works with keyboard interaction, for example if user presses Cmd + Enter on a link to open it in a new tab. We have a similar implementation in Vue, but we cannot get the links to open in a new tab with keyboard. It works fine with click + Cmd, but with Enter + Cmd the event modifier just doesn't go through to the link. Maybe there is a workaround for this?

[mwawrusch]

We are using the combobox for an autocomplete search box (see opensea.io as a reference of what I mean), which is probably similar to the OPs use case. Maybe this would warrant a component of it's own?