KeyUp binding example


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 />

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.


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.


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.


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

This component is used in fuzzy-finder package


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.