Close/Hide Combobox on click when using NextJS Link

[Strijdhagen]

Hi all,

I'm using the Combobox with NextJS to jump between pages. Unfortunately, the box doesn't hide/close after going to a page.
I had a similar issue with the popover panel which I was able to solve by wrapping it in close():
https://headlessui.com/react/popover#closing-popovers-manually

This doesn't seem to work for Combobox though, when attempting to wrap Combobox.Option in close() I receive and error that close() is not a function. When attempting to wrap Combobox.options in close() it doesn't even open.

Any idea what I could apply to close?

 {({ open, close }) => (   //To close menu after clicking
    <span onClick={() => close()}>       
      <Combobox.Options  className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
      
          
            {filteredPeople.map((person) => (
              
              <Link href={`/location/${person.iso3}`}>
                <Combobox.Option
                key={person.name}
                value={person.id}
                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></Link>
          ))}
       
       
      </Combobox.Options> 
      </span>
       )}

[Strijdhagen]

Fixed by applying the same change as suggested for menu: https://headlessui.com/react/menu#integrating-with-next-js

:)

[meotimdihia]

It doesn't work with Next.js 13. Do you know another way?