KeyUp binding example


#1

Is there any simple example how can I create/open new tab and navigate through list of items using arrows?

Currently I am trying to create such a solution but I getting some problems with this.

Opening new tab:

atom.workspace.addOpener((uri) => {
  if (uri === 'atom://my-page') {
    return this.pageView;
  }
});

Render method for my page:

render() {
  return (
    <div on={{ keyup: this.onKeyUp, click: this.focus }}>
      <Header />
      <List
        activeRow={this.activeRow}
        data={this.searchResults}
      />
    </div>
  );
}

I know that div is not focus-able and keyboard events will be ignored, I tried different solution
e.g. adding hidden input in order to call onKeyUp, add tabindex and so on but I cannot make it work.


#2

Like the built-in fuzzy-finder package? You can see it with the command Fuzzy Finder: Toggle File Finder or the Find -> Find File menu item.


#3

Thanks for the answer @DamnedScholar, but I thought more about something like find-and-replace package.

Nevertheless I will take a look on fuzzy-finder maybe I will get some inspiration.


#4

I think this can be very helpful for me atom-select-list

This component is used in fuzzy-finder package


#5

Here’s another example of how you can use atom-select-list from a package I wrote. Let me know if you have any questions about implementing it.