ember-select-2 icon indicating copy to clipboard operation
ember-select-2 copied to clipboard

"optionValuePath" does not work with "query" parameter

Open andykrier opened this issue 9 years ago • 4 comments

Hello,

We just started playing around with this and it seems very promising. I am fairly new to Ember, so please forgive my ignorance, but I seem to have run into a roadblock. The following assertion was displayed while I was configuring the type ahead options with the "query" parameter:

select2#initSelection can not map string values to full objects in typeahead mode. Please open a github issue if you have questions to this.

From the message I would assume that you are aware of this issue, but thought I would follow the instruction none the less.

Here are a few snippets of code from our test app:

Handlebars:

{{select-2 
    value=newCategory 
    optionValuePath="id" 
    placeholder="Select Category" 
    allow-clear=true 
    typeaheadSearchingText="Retreiving categories" 
    typeaheadNoMatchesText="No categories found for '%@'" 
    typeaheadErrorText="Loading failed: %@" 
    query="queryCategories" 
}}'

Models:

var Todo = DS.Model.extend({
    title: DS.attr('string'),
    category: DS.attr('string'),
    due: DS.attr('date'),
    cost: DS.attr('number'),
    isCompleted: DS.attr('boolean')
});
var Category = DS.Model.extend({
    text: DS.attr('string'),
    description: DS.attr('string')
});

Controller:

...
queryCategories: function(query, deferred) {
     this.get('store').find('category' /*, 
          { text: query.term } - this is not working but I think that's due to the local storage adapter 
     */ ).then(deferred.resolve, deferred.reject);
}
...

Any help would be greatly appreciated.

Regards, Andy

andykrier avatar Dec 04 '14 18:12 andykrier

Ok, I can see why this is causing confusion. The #initSelection method is used to find the full objects to a bunch of given (potentially selected) values when using optionValuePath, as you do.

This is required to find display text and description etc. Also, this method is used to disable the input if there are selected values that are not present in the content array (because this could destroy an existing selection without any user action!).

However, with typeahead mode there is no possibility for the add-on to search for the currently selected values, because the type of query only lies in the controller. We would need an additional API for obtaining the complete objects for a bunch of values (similar to the query API currently used).

The simple workaround is to use full object binding which does not invoke the #initSelection method at all. Is there a special case where you would definitely prefer using the optionValuePath mode?

iStefo avatar Dec 08 '14 14:12 iStefo

I'm running into the same issue. The problem with using full object binding is that my models don't necessarily have the same property names that select-2 expects (text, description). What I tried was in my query action, mapping each record into a new Ember object that sets the id, name, description, and a reference to the actual record. The idea was to use optionValuePath so that the actual record is what is selected, not the Ember object with the id/text/description. Is there a better way?

xtagon avatar May 18 '16 19:05 xtagon

Any update on this? I am facing the same issue

jigneshchudasama05 avatar Jun 14 '16 12:06 jigneshchudasama05

I'm also having this issue

NullVoxPopuli avatar Jan 07 '17 02:01 NullVoxPopuli