palantir/blueprint

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

Open

#3,160 opened on Nov 16, 2018

View on GitHub
 (10 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Package: selectType: enhancementhelp wanted

Description

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?

Contributor guide

Tech stack
reacttypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactBlueprint Omnibar component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the Omnibar component source code to understand how keyboard navigation is implemented and why it breaks when initialContent is provided. Review the issue comments for any suggested fixes or workarounds. Look at the component's event handling, particularly focus management and keydown listeners. Check if there is a need to set the active index or similar prop when using initialContent.