Search code examples
javascriptember.jsember-cliember.js-2

In Ember 2, I am unable to get the event object when binding on=keypress event to {{input}}


In Ember 2, I am trying to do probably the most simple thing. When I bind an event to an input element, I expect the event argument to be passed to my action handler but I am unable to get that. Simply I require to check for keyCode 13 which is for "enter" key on keyboard.

 {{input type=text
           value=model.filters.query
           placeholder="Search by title"
           action="search" onEvent="key-press"
 }}

My Function Handler is:

search(newValue){
 // I am only getting newValue and not the event object
}

Solution

  • DOM events are not exposed by default. Here is a issue regarding that.

    But for your use case we can trigger an action when the enter button is pressed by specifying the action in the 'enter' attribute of input helper. You can refer this which lists the different user events where an action can be added.

    {{input 
      type=text
      value=query
      placeholder="Search by title"
      enter="search"
    }}
    
    App.IndexController = Em.Controller.extend({
      query: '',
      actions: {
        search: function(value) {
          alert(value);
        } 
      }
    });
    

    Here is a working demo.