palantir/blueprint

Question: [Omnibar]: How do I get the keyboard controls to work when initialContent is displayed?

Open

#3,160 建立於 2018年11月16日

在 GitHub 查看
 (10 留言) (0 反應) (0 負責人)TypeScript (20,263 star) (2,167 fork)batch import
Package: selectType: enhancementhelp wanted

描述

Environment

  • Package version(s): @blueprintjs/core - v3.7.0 & @blueprintjs/select v3.2.0
  • Browser and OS versions: Chrome v70 / macOS Sierra

Question

I'm using Omnibar in https://pasteapp.com.

My setup is as follows;

  1. I have a React Component Foo
  2. The component Foo is stateful
  3. The state is composed of items and filtered items
  4. The component renders Omnibar like this;
<Omnibar
  isOpen={this.props.isOpen}
  itemRenderer={this.renderItem}
  onQueryChange={this.handleQueryChange}
  items={this.state.filteredItems}
  onItemSelect={this.props.onItemSelect}
  onClose={this.props.onClose}
  inputProps={{
    leftIcon: null
  }}
/>

It works just fine, I can use keyboard controls (arrow keys) to go up/down in the results, however, as soon as I introduce initialContent like this;

<Omnibar
  ...
  initialContent={this.state.items.slice(0, 10).map(this.renderItem)}
/>

...the items are shown, but I can't use the keyboard controls anymore. No exceptions were thrown, or errors were logged.

What am I doing wrong here?

貢獻者指南