Ember unable to retain dropdown value

I am using Ember 2.5.0. In my application, I have created a page with a dropdown using the ember-select-list plugin.

I am able to render the dropdown, but unable to retain the value of the dropdown. Whenever I select the value, I am getting the following exception in the chrome console:

Assertion Failed: Cannot call get with 'id' on an undefined object

Please find the following code, for reference:

Template :

{{select-list content=roles 
              optionValuePath="role"
              optionLabelPath="role" 
              value=role 
              action=(action (mut role))}}

Route.js

export default Ember.Route.extend({
   model(){
      return Ember.RSVP.hash({
         books : this.store.findAll("book"),
         roles : this.store.findAll("role")
    });
},
setupController(controller,model){
   controller.set('users',model.books);
   controller.set('roles',model.roles);
 }
});

Model

export default DS.Model.extend({
    role:DS.attr()
});

In the router, when I pass Array(roles: this.store.findAll("role").toArray()) instead of model, I can retain the value, but it throws an error while passing model.

Anyone, could you please help me to resolve this issue?

Solution

The ember-select-list documentation and unit test indicate that an array is required for the content property on the {{select-list}} helper.

This is why Ember.RSVP.hash seems to fail, as hash expects and returns an object, which is a type that ember-select-list is not configured to use.

Instead of hash, you should use Ember.RSVP.all, as all expects and returns an array, which should work.

I've created an Ember Twiddle example to demonstrate.

If you'd rather not use ember-select-list, you might find it easier to merely use Ember's each helper to build out your own select list, like this:

<select onchange={{action "selectRole" value="target.value"}}>
  {{#each roles as |role| }}
    <option value="{{ role }}" label={{ role }}>
      {{ role }}
    </option>
  {{/each}}
</select>