istefo / ember-select-2 Goto Github PK

Is it possible to toggle the disabled state of individual options?

https://select2.github.io/examples.html#disabled

Using the code:

{{select-2 content=theReasons value=model.reason optionValuePath="id" placeholder="Choose a reason" label="Reason"}}

With the following defined in the controller:

export default Ember.Controller.extend({
    theReasons: [{
        id: "Reason 1",
        text: "Reason 1"
    }, {
        id: "Reason 2",
        text: "Reason 2"
    }],

I get the following error because theReasons can't be found:

Uncaught TypeError: Cannot read property 'each' of undefined

The same code used to work, not sure exactly which Ember version it broke with.

Hi there,

I'm attempting to use ember-select-2 on a project where our Ember files are processed through Rails' asset pipeline. The long term plan is to move to Ember-CLI but this is what we have to work with now. What modifications would I have to make to have this run more or less "on its own" without Ember-CLI doing the prepwork?

Hi!

I am trying to use emebr-select2 in multiple mode within a #each helper.

//template.hbs

 {{#each configurations}}
{{select-2 content=accessories multiple=true value=selectedAccessories optionValuePath="id" placeholder="Accessories" }} 
{{/#each}}

//controller.js

selectedAccessories: null

The select works fine, and updates the selctions in the UI, but the property bound to value does not change.
Outside an #each helper, it works fine with proper binding.

Could you please share your thoughts on this?

I have come across this issue: https://github.com/ivaynberg/select2/issues/1588
which seems to have been fixed on select2-bootstrap (https://github.com/ivaynberg/select2/pull/1717)

We'd like to use select2 / ember in an application that doesn't use bootstrap. Am I understanding correctly that there's currently a hard dependency on including bootstrap for this component?

Perhaps it could at least be configurable. What do you think?

Can we Upgrade to htmlbars or handlebars 2.0? If we can't on here would harm to do it locally?

Hi guys,

If I used this component in Firefox it is always disabled.
I have tried both enabled='enabled' and enabled=true.

THere is a solution?

I found the value binding doesn't update when used "typeahead" mode. I implemented "queryOptions" in the controller and retrieve server data. Then transformed the data into key-value array. This worked fine till I choose one option and it got an error.

I debugged it and found the content field in this plugin was empty since I didn't assign it. I now just fix it by setting it in the following codes

                ... ...
               deferred.promise.then(function(data) {
                if (data instanceof Ember.ArrayProxy) {
                    data = data.toArray();
                }

               //fix for server return updates array
                self.set('content', data);

                query.callback({
                    results: data
                });
               ... ...

Not sure if it is the right way or do I need to implement my own initSelection method. How to initiate the first time render select2 component?

The right commands are:

# install addon from npm repository
$ npm install ember-select-2 --save
# install dependencies
$ ember g ember-select-2

Without the --save flag, the npm package is extraneous and the generator does not find the blueprint. See this SO question for details

I dont see an option to disable the searchbox that appears in the selection dropdown. This might be useful for "small" lists of options. Is that configurable?

It would be nice if you could add in the examples a showcase of how to use your addon for templating on Select2.

At least the issue with SafeStrings must be clearly explained (html strings will be escaped away)

Anyway, thanks for a great addon!

{{select-2 value=myValue content=myContent optionLabelPath='name' allowClear=true}}

If "myValue" in the example above is a "belongsTo" in ember-data, even when it doenst have a content it's value is not null or any falsy value, because the property it's a promise that resolves to its promised (real) value.
I think if the ember-select-2 could see if the property is a promise and check if there is a promised value to set the dropdown as selected or not.

Select2 supports tagging feature. Is this available or any plan for this?

Hello

I really like your component and thought I would take it one step further to make it easier to maintain and install.

I made a new repository via generator-ember-plugin and put it up on Bower. I don't mean to take over your project but rather enhance it and hopefully collaborate with you to make it easier for people to use.

The only code change I made was formatting. You can see my repository here

P.S. I didn't do much in terms of documentation and examples as your repo already has good ones :)

I'm using ember-select-2 in my Ember app and it works really great, thank you so much for that! But the placeholder doesn't work for me. It's just empty.

I'm using:

• Ember 1.9.1
• Ember Data 1.0.0-beta.14.1
• Handlebars 2.0
• jQuery 1.11.2
• ember-select-2 1.1.1-beta1

That's my code:

{{select-2
  cssClass="uk-width-1-1"
  content=sortedRequests
  value="selectedRequest"
  optionLabelPath="title"
  placeholder="Choose some Pizzas"
}}

And that's how it's look like:

Searching in DOM for "Choose some Pizzas" returns in zero results.

Any ideas? :)

hi im kinda having a problem how to implement it with ember data. thank you your plugin is great :D

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

Actually if you set the select-2 enabled to false even as static in handlebars it doesnt disable the element till the watchDisabled is fired when one of the observed properties is changed.

First of all I would like to say a big thank you for this plugin. We currently have a Apache Wicket based application that we just starting to migrate to EmberJS (using Ember-Cli). I am pretty new to Ember so although you have shown some working examples would it be possible to show the code behind them.

The main issue I am having is that I can create a select2 component on my page and I can click in it and it shows the options to select which are populated from my FIXTURES based model. What I cant seem to work out how to do is to save the selected option(s) and also show the selected option(s) when initially displaying the component. I assume it is something to do with the 'value' property of the component? but not sure how.

If you could provide the example code for the model, route and controller (if used) so I can see how to get this working that would be great.

Thank you once more for the work, Stefan, and here is an another question about ember-select-2: is it possible to bind a css class name to the computed property like that cssClassBinding="isEnabled:enabled:disabled" ?

Hi, thanks for share this ember component for select2 extension. I use select2 quite a lot in my developments and it is helpful to keep developing it. Here I would like to suggest add formatResult and formatSelection for option formating. In my case, I extended Select2Component and add these two properties

var mySelect2Component = Select2Component.extend({
    formatResult: function(item){
    ...
    },
    formatSelection: function(item){
    ...
    },
}); 

var Select2Component = Ember.Component.extend({
...

formatResult: null,
formatSelection: null,
...
didInsertElement: function() {
    ...
    options.formatResult = this.get('formatResult') || function(item) {
    ...
    };

    options.formatSelection = this.get('formatSelection') || function(item) {
    ...
    };

}

});

I'm curious if there is a possibility to have some built-in functionality to delay the keypresses from triggering the query filtering?

Right now the select-2 component is sending server queries on every keypress (Ideally I'd like to delay it a bit to reduce the number of outward queries). It could be possible that I am overlooking something?

you can see it on the example on the site (https://istefo.github.io/ember-select-2/#/examples), allow-clear doesn't seem to be working properly as no clear button is displayed when the select box has a selection.

{{select-2 content=pizzas value=favouritePizza placeholder="Choose your pizza" allow-clear=true }}

it says

"By specifying the allow-clear option, you determine whether or not a clear button is displayed when the select box has a selection."

any tips?

Ember 1.10.0 will change the implementation of Ember.assert: if the test is a function it will be invoked.

This plugin asserts the existence of Ember.$.fn.select2:
Ember.assert("select2 has to exist on Ember.$.fn.select2", Ember.$.fn.select2);
This errors out as this points to the window object when invoked.

I think this should be changed to:
Ember.assert("select2 has to exist on Ember.$.fn.select2", Ember.$.fn.select2.bind(Ember.$()));

I have been unsuccessful in being able to retrieve the currently selected value when someone selects on option with Typeahead mode. Does anyone have any suggestions here?

select-2 optionValuePath="organization_id" optionLabelPath="name" value=organization_id typeaheadSearchingText="Searching.." minimumInputLength=3 maximumInputLength=20 query="queryOrganizations"

Whenever the results are returned, all of them have the following class attached to them select2-result-unselectable. When I change the class to select2-result-selectable, it seems to work without an issue. The following stackoverflow questions are relevant: http://stackoverflow.com/questions/14819865/select2-ajax-method-not-selecting

Seems like the result needs an id field which all of my results have. Any reason why this is happening and a possible fix?

Like expand/collapse, set filter term(?)...

I don't think there is a canonical way of talking to a component from a controller in ember, right? There are two different ways I can think of for now:

1. Send Action: This means that the controller has a reference to the component (which will be populated by the component itself on initialization) and then can use component.send('expand'); etc. to trigger actions.
2. Events: The controller could implement Ember.Evented and trigger events like expandComponent. This concept breaks when one controller "manages" multiple components, because they would all respond to the same events.

Any thoughts on this?

When using CSS to stylize the component, I need the same custom class added to the result box, once that it is outside the DIV with my class. This would be useful when you use two or more styles of the component in the same application.

I'm writing tests but am having a hard time programatically simulating clicks on this component:

So far I've tried this:

test("Checking navigation", function () {
  expect(1);
  visit('/hub');
  click('#btnLogin');
  andThen(function () {
    click('.select2-container');
    andThen(function () {
       //would like to see some interaction here
    })
  });
});

but the component doesn't respond.

As in Select2 documenation

Would it be possible to add the tagging support so that a tag can be added that is not in the current dataset? Whilst it is possible to set multiple 'tags' where the data exists it isn't possible to enter a completely new value.

For example, given the data: ['red','green','blue'] and setting the multiple option to true I can select 'red' and 'blue'. However, I would also like to add another colour, e.g. 'orange'. The value would then be: ['red','blue','orange'].

See the Tagging Support section here: http://ivaynberg.github.io/select2/

Hopefully that would be an easy addition?

Many thanks

You mention in the readme packaged components are not solved. Well.. They are now!

It would be awesome if you turned this into an ember cli addon so people could use it easier. An example of a project that does this is https://github.com/dockyard/ember-cli-async-button

Is there any way to add the required attribute and get the browser to honor it like {{input}} does?

Example:

                {{select-2
                    content=countries
                    value=model.country
                    required="required"
                }}

I would like to say thank you for the plugin.

What I would like to implement is the search input that shows the results right away as a user types as shown in the 'Loading Data' section of the select-2 homepage.

Is it possible? If so, Could you give me example codes?

Thanks.

After the upgrade to ember-data 1.0.0-beta.14.1 (1.0.0-beta.12) I get this error:
Uncaught TypeError: Cannot read property 'children' of undefined at select-2.js:293:

if (item.children && item.children.length) {

this is the template:

{{select-2
  content=file.rootCategoryChildren
  value=file.selectedChildCategory
  multiple=false
  placeholderTranslation="ui.inputs.placeholders.second-image-category"
  optionValuePath="id"
  optionLabelPath="name"
  class="form-control"
  enabled=file.isRootCategorySelected
}}

file.rootCategoryChildren is initially null, when another value is selected, it's populated.
This is the select-2 input which causes file.rootCategoryChildren to be populated, which seems almost the same, but it works:

{{select-2
  content=rootCategories
  value=file.selectedRootCategory
  multiple=false
  placeholderTranslation="ui.inputs.placeholders.first-image-category"
  optionValuePath="id"
  optionLabelPath="name"
  class="form-control"
}}

and this is the function which populates rootCategoryChildren:

updateRootCategoryChildren: function() {
    this.set(
      'rootCategoryChildren',
      this.get('controllers.colored-finished-products/images-upload')
        .get('availableCategories')
        .findBy('id', this.get('selectedRootCategory'))
        .get('children')
    );
    this.set('selectedChildCategory', null);
  }.observes('selectedRootCategory')

The original availableCategories array comes from the backend, via DS.Model and a rails-api backend

Is there any way to add the required attribute and get the browser to honor it like {{input}} does?

Example:

                {{select-2
                    content=countries
                    value=model.country
                    required="required"
                }}

Hello, Stefan and thank you for the work done!
Here is the challenge that I faced: it's impossible to select something if optionValuePath="abbr".
List remain expanded and the value is not set. Here is my data source https://github.com/dmfilipenko/timezones.json/blob/master/timezones.json
everything is fine with id.

When a user has selected items the virtual keyboard in mobile is still shown.

looks like I will have to use this to remove focus:

 Ember.$("someSelector").on("select2-close", function () {
      setTimeout(function () {
        $('.select2-container-active').removeClass('select2-container-active');
        $(':focus').blur();
      }, 1);
    });

Can this feature be integrated somehow into the addon?

We're in the process of finalizing the 4.0 release and are aiming to have it done by the end of this month at the latest.

https://select2.github.io/

Since I'm not very familiar with this plugin, I can't really judge how easy it is going to be to migrate over to the new version.

This issue will collect and keep track of upcoming features I would like to have in the 1.2 release, which will probably published in January 2015.

• Tests for ember-i18n support (#28)
• Adding option to disable the search field for single select dropdowns (#29)
• Fix promises in value binding (#30)
• Make $.fn.select2 assertion compatible with ember 1.10 (#34)
• ... probably more to come as I am able to process more tickets

As expected, typeahead mode sends the query action for each letter typed (even the empty string). With a lot of data, the first requests sent to the server (with less letters to filter the results) will take a lot longer than the next ones. Now if a request is resolved (deferred.resolve) after a value has been selected by the user, the value is unselected and disappears from the field.

It feels like, when multiple query actions are sent, only the data coming from the last one should be processed by ember-select-2. I'm not sure if it is the concern of the library, or of the user implementing the query action. What do you think ?

The component should have a valueChanged:value action that can be bound to a controller action which will fire when the selection changes.

This is interesting for use cases where it is not necessary to store the selection value in the controller, but an action that will fire when the selection changed is enough. (Think about using the component as a navigation unit)

If you want to work on this before I start, please ping me so we don't do the same stuff twice ;)

How could this component be used with a full server side type ahead?

if I set content=someArray.. how then, on 'click' could I invoke a server side call.. or as they type in letters, doing a call against a server to get back a dataset?

(in the case where I want to use the component, but the 'list' could be 100,000 elements if I just loaded them all in the route etc etc.. and thus I obviously don't want to do that)

Hi,

Using sortable plugin, I tried adding:

this._select.select2("container").find("ul.select2-choices").sortable({
    containment: 'parent',
    start: function() { self._select.select2("onSortStart"); },
    update: function() { 
        self._select.select2("onSortEnd"); 
        self.valueChanged();
    }
});

at the end of didInsertElement but is unstable, the drag freezes and doesn't release the item. Any ideas ?

After some attempts I found how to use ember-i18n with ember-select-2 to translate placeholders.
It could be useful to insert this information in the docs:

Ember.Component.reopen(
  Ember.I18n.TranslateableProperties
);

Then it is possible to use:

{{select-2
  content=myContent
  value=myValue
  placeholderTranslation="inputs.placeholders.myPlaceholder"
}}

Carefully not overwriting any customisations, but not forgetting any required changes.

As described in #23, there is a need for accessing the full flexibility of the jQuery select2 plugin, that can not be established in the near future when trying to uphold the current quality and safety of this component.

I explained why I think that simply opening every option to the outside world is not a good idea: Because it may give the illusion that every setting is tested and works the way things work in ember.js. But they might not, and opting-in should be harder than just setting a binding - but not as hard as forking this project!

Therefore I am thinking of a way that does not require modifying this code, but maybe instead subclassing it. A very early idea would be an API like this:

import Select2 from 'ember-select-2';

export default Select2.extend({
    // define options here for all instances of this component
    customOptions: {},

    // or in a dynamic fashion based on custom options from outside
    customSetup: function() {
        this.customOptions = {
            matcher: function(...) { /* custom plain-JS matcher to override provided */ },
            otherSelect2Setting: true
        };
    }.on('init')
});

When setting up the component, ember-select-2 could check the customOptions (not calling it options on purpose) hash and choose the options provided there over the default implementations. This way, all the flexibility is exposed but no false promise is made for compatibility.

An alternative approach would a an optional method that would be called after building up the original options hash and that works like this:

import Select2 from 'ember-select-2';

export default Select2.extend({
    customizeOptions: function(options) {
        // override options while having access to the defaults
        var oldMatcher = options.matcher;
        options.matcher = function(item, query) {
            // allow items that match the query and all superstar items
            return oldMatcher(item, query) || item.superstar;
        }
        return options;
    }
});

This approach seems even more flexible to me because it allows access not only to the select2 default options set by the original component, but also to internal state & configuration that was built up in the didInsertElement method.

What do you think of these two approaches?

ensure that our blueprint gets executed (it should, since it has the same name as the package), but that has to be tested. Otherwise, specify a defaultBlueprint.