react headless ui combox autocomplete, how to search by enter key

Question

i am using this headless ui combobox https://headlessui.dev/react/combobox

for my own auto complete search box suggestion. For this case i am wondering, how can i make the combobox to send the values when i press the enter key? currently i have ways to send the value with onclick on the suggested options but i would like to have something for enter key as well

<>
  <Combobox
    as="div"
    className="relative mb-10 mx-auto max-w-x1 rounded-x1 bg-white shadow-2x1 ring-1 ring-black/5 divide-y divide-gray-100 overflow-hidden"
    value={searchCardName}
    onChange={setSearchCardName}
  >
    <div className="flex items-center px-4">
      <SearchIcon className="h-6 w-6 text-gray-500" />
      <Combobox.Input
        className="h-12 w-full border-0 focus:ring-0"
        placeholder="Search..."
        onChange={(event) => onChangeHandler(event.target.value)}
      />
    </div>
    <Combobox.Options className="max-h-96 py-4 text-sm overflow-y-auto">
      {suggestions.map((cardName) => (
        <Combobox.Option key={cardName} value={cardName}>
          {({ active }) => (
            <div
              className={`space-x-1 px-4 py-2 ${
                active ? "bg-indigo-600" : "bg-white"
              }`}
              onClick={() => onSuggestHandler(cardName)}
            >
              <span
                className={`font-medium text-gray-900 ${
                  active ? "text-white" : "text-gray-900"
                }`}
              >
                {cardName}
              </span>
            </div>
          )}
        </Combobox.Option>
      ))}
    </Combobox.Options>
  </Combobox>
  {isResult && <Tabs />}
</>;

edit for updated, tried onKeyDown with this

 <>
                <Combobox as="div" className="relative mb-10 mx-auto max-w-x1 rounded-x1 bg-white shadow-2x1 ring-1 ring-black/5 divide-y divide-gray-100 overflow-hidden" value={searchCardName} onChange={setSearchCardName}>
                  <div className="flex items-center px-4">
                        <SearchIcon className="h-6 w-6 text-gray-500" />
                        <Combobox.Input className="h-12 w-full border-0 focus:ring-0" placeholder="Search..." onChange={(event) => onChangeHandler(event.target.value)} onKeyPress={(e) => e.key === 'Enter' && console.log("testing")}/>
                  </div>
                        <Combobox.Options className="max-h-96 py-4 text-sm overflow-y-auto">
                          {suggestions.map((cardName) => (
                            <Combobox.Option key={cardName} value={cardName}>
                              {({ active }) => (
                                <div className={`space-x-1 px-4 py-2 ${active ? 'bg-indigo-600' : 'bg-white'}`} onClick={() => onSuggestHandler(cardName)}>
                                  <span className={`font-medium text-gray-900 ${active ? 'text-white' : 'text-gray-900'}`}>{cardName}</span>
                                </div>
                              )}
                             
                            </Combobox.Option>
                          ))}
                        </Combobox.Options>
                </Combobox>
                {isResult && 
                <Tabs />}
            </>

the onKeyDown is under my Combobox.Input

<Combobox.Input className="h-12 w-full border-0 focus:ring-0" placeholder="Search..." onChange={(event) => onChangeHandler(event.target.value)} onKeyPress={(e) => e.key === 'Enter' && console.log("testing")}/>

Answer 1

solved it i guess is using onKeyUp instead of onKeyDown.

<Combobox.Input className="h-12 w-full border-0 focus:ring-0" placeholder="Search..." onChange={(event) => onChangeHandler(event.target.value)} onKeyUp={(e) => onKeyboardHandler(e)} />