reactstrap, dropdown with search input

Question

In order to benefit the design of reactstrap dropdown, I want to use it as a search bar with results shown in the dropdown menu. But the default key listener that enables navigating through results by keyboard (arrow keys Up/Down), only captured by Input, and cannot propagate it to the parent or whatever is listening to key events when the result is visible.

<Dropdown toggle={() => setIsOpen(!isOpen)} isOpen={isOpen}>
  <DropdownToggle>
    <Input onChange={(e) => setQuery(e.target.value)} placeholder="search placeholder" />
  </DropdownToggle>
  <DropdownMenu>
    {fetchedItems.map((item) => (
      <div key={item}>
        <DropdownItem>action #1</DropdownItem>
        <DropdownItem>action #1</DropdownItem>
        <DropdownItem text>Dropdown Item Text</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
      </div>
    ))}
  </DropdownMenu>
</Dropdown>

Now looking at this sandbox I am searching for two approaches, either add key event listeners to default as default dropdown behavior, or customize the <Input type=" search"/>

Now the question is how to do it. I assume handling key listener might be better.

Answer 1

The whole problem was from a type of event listener, so the DropDownToggle component receives the onKeyDown events not the onKeyPress

<DropdownToggle onKeyDown={(e) => {/* now have access to e.key */} }