Selection not synced properly when using model object

[yasirhantoush]

I came across this issue, I would like to share it, may be README could be updated as well, it took me several days to get it working.

Basically, the scenario is that you have an item model with belongsTo category property. you want to edit an item and show categories as a select box, so user can update the category.

you have to use the content in the select value because the belongsTo is a promise:

//template.hbs
{{#x-select class="form-control" value=model.Category.content}}
    <option></option>
    {{#each categories as |category|}}
        {{#x-option value=category}}{{category.name}}{{/x-option}}
    {{/each}}
{{/x-select}}

[jbschrades]

@yasirhantoush this works to get the correct selected value in the dropdown. However, it then doesn't send the correct value to be updated upon submit. Did you run into this as well?

If I leave off the .content then the correct selected value is sent.

[jevanlingen]

Yeah, also encountered this problem. The emberx-select just does not work with promises. There's no easy fix either, because the whole code structure is not build to support promises...

[svox1]

@yasirhantoush thx for the hint!

[nerdyworm]

I just got burned by this bug or something similar.

1. Component makes store.query for data to populate menu.
2. Promise resolves, we then build out a grouped set of options.
3. We then set the value of the belongsTo to the user's preferred default option.
4. The select menu does not show the correct selection, it defaults to the first item, but when saved the selected item is passed to the server. This ends up confusing the hell out of the users ;)