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.

Are your `DropdownItem` going to be hardcoded? If those options are coming from fetchedItems, couldn't you just filter for the value in fetchedItems? — Stoobish, Nov 29 '21 at 09:29
@Stoobish What is the difference? what ever the value is, the arrow keys does not work to navigate over the dropdown items. check the sandbox, there are three examples where the one with `Input`component does not work — Amir-Mousavi, Nov 29 '21 at 09:32
Oh got it, misunderstood your question. You want the searchable Dropdown to allow for navigation by arrow keys. — Stoobish, Nov 29 '21 at 09:37

score 0 · Answer 1 · answered Dec 02 '21 at 13:49

One way to do this would be by adding an eventListener with the dropdown component.

You would also want to maintain a state which tracks the currently navigated dropdown item's index.

The eventListener can increment and decrement the selected index

If nothing is selected, on up keystroke set 0 and on down keystroke set length - 1 as the current index
Now increment or decrement on different keystrokes
If something new is searched, change it to undefined or 0 at your convenience
Give custom styling to the currently navigated index

Hi, that was what I have already tried and mentioned in the question, that the eventListener on Dropdown components (DropDown,DropDownMenu,DropDownItem) does not receive any keyboard events. If you could extend your answer from the provided SandBox that would be nice :) — Amir-Mousavi, Dec 07 '21 at 15:32

score 0 · Answer 2 · answered Dec 06 '21 at 09:11

Please follow following thing:

1)The above "event listner" should be part of parent of list. 2)Set value of "current-index" to 0 once you get new set of data. 3) When user move the selection with the arrow button "incsease" and "decrease" once as per "key-value". 4)If use jump from one point to other get the "id" or "serial number". 5) Ideal event listener should be "onfoucs" if using on the children.

score 0 · Accepted Answer · answered Dec 07 '21 at 16:05

0

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

answered Dec 07 '21 at 16:05

Amir-Mousavi

4,273
12
70
123

reactstrap, dropdown with search input

3 Answers3