ember-key-navigation

A Simple EmberJS Addon that supports keyboard navigation inside the list.

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v12 or above

Installation

ember install ember-key-navigation

Usage

• Ember Key Navigation component with list of results.

// template.hbs

<EmberKeyNavigation @focusInDefault={{true}} @model={{this.countries}} as |navigationWrapper|>
  {{#each this.countries as |country|}}
    <navigationWrapper.item @model={{country}} @onSelect={{action doStuff}}>
      {{country}}
    </navigationWrapper.item>
  {{/each}}    
</EmberKeyNavigation>

// *.js

countries: [
  'India', 
  'United States', 
  'United Kingdom',
   ...
]
  
doStuff(result) {
  alert(`Selected country is ${result}`);
}

Helpful Links

Live Demo

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.