使用箭头键浏览下拉结果，同时保持对文本框的关注

Question

我正在尝试在React中实现可键入的下拉组件。我设法实现了一个简单的下拉列表，该列表根据用户在下拉菜单文本框中键入的内容向用户显示结果，并且结果在键入时不断更新。

现在，我希望用户能够使用向上和向下箭头键浏览下拉结果。但是为此，我想我需要同时专注于两个要素？一个用于可输入文本框，以便用户可以继续键入，另一个用于搜索结果，以便用户可以使用键在它们之间导航？ 我知道一次只能将重点放在一个元素上，那么我该如何实现呢？

作为我所要求的示例，请参见以下可键入下拉列表的快照：

如您所见，焦点位于此处的文本框上，但它似乎也位于突出显示的元素上，因此可以在其上使用上下键。我从react-select项目中拍摄了这张图片。您如何猜测他们实现了这一目标？

我的琐碎下拉列表代码当前如下所示：

let dropdownOptions = [];
for (let i = 0; i < searchResults.length; i++) {
    dropdownOptions.push(
        <div key={i} tabIndex={"0"}
             onMouseDown={() => {
                    // code to set the dropdown's selected value when
                    // a dropdown option is clicked, then hide the dropdown
                }}
             onKeyPress={(e) => {
                    // this is where the code to navigate between 
                    // results using arrow keys will go.
                }}
        >
             {searchResults[i].value}
        </div>);
}

这是<div>的数组，其中包含下拉列表的搜索结果。这些div构成了在文本框中键入内容时向用户显示的选项。

那么，尝试将重点放在多个元素上是正确的方法吗？如果没有，我还能怎么做呢？