选择项目时，在“先行”菜单中渲染所有选项

Question

我正在使用react-bootstrap-typeahead，如果输入值与其中一个完全匹配，我希望显示所有可用选项。我的意思是，如果用户写的一个值与我希望显示所有选项的其中一个选项匹配（并使匹配的一个选项处于活动状态），而不仅仅是匹配的选项。

我尝试使用Typeahead的renderMenu道具，但我无法达到预期的行为。这是我的代码：

render() {
  let options = this.state.options;
  let optionsValues = this.state.options.map(v => v.value);
  let value = this.state.inputValue;
  if ( optionsValues.includes(value) ) {
    const TypeaheadMenuItem = menuItemContainer(MenuItem);
    return (
      <div className="col-4">
        <label className="form-group has-float-label" name={this.props.name}>
          <Typeahead
            labelKey="value"
            onInputChange={this.updateInputValue}
            selected={[this.state.inputValue]}
            options={options}
            placeholder={this.props.name}
            selectHintOnEnter={true}
            disabled={this.props.disabled}
            renderMenu={(results, menuProps) => {
              return (
                <Menu {...menuProps}>
                  {options.map((opt, ind) => 
                    <TypeaheadMenuItem option={opt} key={ind} position={ind} active={opt.value==value}>
                      {opt.value}
                    </TypeaheadMenuItem>
                  )}
                </Menu>
              );
            }}
          />
          <span><b>{this.props.name}</b></span>
          <div className="invalid-feedback"></div>
        </label>
      </div>
    )
  }
}

我可以看到这些选项，但由于某些原因，所有选项都将道具active设为true。

实际行为

以下是我的组件现在的行为截图： https://gyazo.com/9cbb9842654d681f7ff3e1a2e663e09e