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

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)} />