隐藏元素时使用tabIndex导航

Question

摘要

我想了解列表导航如何在浏览器上工作，以便在React上的带有建议字段的情况下执行自定义输入。

客观

目标是为使用建议的下拉菜单提供2个自定义输入。当我单击输入时，该下拉列表将正确显示，并且可以通过制表键导航至我的建议。但是，当我尝试导航至下一个输入时，将显示下拉列表，但无法浏览第二个下拉建议。

代码示例

我有以下JSX代码：

class InputDropdown  React.Component {
    render() {
        return(<div>
                <div id="input1" className="input-wrapper" onMouseEnter={...} onMouseLeave={...} onBlur={...}>
                    <input className={"input"} 
                        value={this.state.search_input} 
                        onKeyDown={(e) => e.keyCode==13?this.props.validate(this.state.search_input)}
                        onFocus={this.setState(display_dropdown_input1: true)}
                        />
                    <div className={"dropdown-wrapper" + this.state.display_dropdown_input1?"":"hidden"}>
                        {this.props.suggestion.map((suggestion, index) => 
                            <div className="suggestion"
                                tabIndex={0}
                                onKeyDown={(e) => e.keyCode==13?this.props.validate(suggestion.text)}
                                onBlur={index+1==this.props.suggestion.length?this.setState({display_dropdown_input1:false})}
                            >{suggestion.text}</div>)}
                    </div>
                </div>
                <div id="input2" className="input-wrapper" onMouseEnter={...} onMouseLeave={...} onBlur={...}>
                    <input className={"input"} 
                        value={this.state.search_input} 
                        onKeyDown={(e) => e.keyCode==13?this.props.validate(this.state.search_input)}
                        onFocus={this.setState(display_dropdown_input2: true)}
                        />
                    <div className={"dropdown-wrapper" + this.state.display_dropdown_input2?"":"hidden"}>
                        {this.props.suggestion.map((suggestion, index) => 
                            <div className="suggestion"
                                tabIndex={0}
                                onKeyDown={(e) => e.keyCode==13?this.props.validate(suggestion.text)}
                                onBlur={index+1==this.props.suggestion.length?this.setState({display_dropdown_input2:false})}
                            >{suggestion.text}</div>)}
                    </div>
                </div>
            </div>)
    }
}

问题

就好像在第一次按下列表时就准备好了列表导航之路，并且如果元素在此按下之后出现，则它们不会算在内。

是否可以在React中执行它？