miguelcobain / ember-cli-selectize Goto Github PK

@miguelcobain #41 is ready for merge if you could be so kind.

Please update npm registry with appropriate fixes.

Uncaught Error: Assertion Failed: The remove action was triggered on the component <app@component:ember-selectize::ember872>, but the action name (function () {
        // What we should really do here is wait until the end of the run loop
        // to determine if the element has been re-appended to a different
        // element.
        // In the interim, we will just re-render if that happens. It is more
        // important than elements get garbage collected.
        if (!this.removedFromDOM) { this.destroyElement(); }
      }) was not a string.

Fixed by adding a remove action:

{{ember-selectize remove='someAction'}}

Hi!

When passing an array of Objects to the content property (e.g. an array of ember-data models) and using content as optionsValuePath (e.g. as needed by ember-data when working with relationships) removing an object from the selection throws an error in selectize.

Uncaught TypeError: $item.attr is not a function in selectize's removeItem-method

Because the observers that trigger this code are also triggered on willDestroyElement this also fails when removing the component from the DOM.

This makes this addon basically unusable for working with ember-data relationships which is very unfortunate because ember.select is also not working for ember-data relationships ;).

I am happy to help with solving this issue but I think input from @miguelcobain would be very useful as I am not really familiar with selectize or ember-cli-selectize.

Any idea what's the problem here?

And of course thanks for this great addon!

Currently adding required=true doesn't work.

ember install ember-cli-selectize
version: 0.2.3
Installed packages for tooling via npm.
installing
Installing browser packages via Bower...
cached git://github.com/brianreavis/selectize.js.git#0.12.0
Installed browser packages via Bower.
installing
The ember generate command requires an entity name to be specified. For more details, use ember help.

Let's say I want to trigger some event on the page when the user selects something from the selectize component. Currently, I would have to set an observer on the value that selectize is bound to and fire an action that way. I realize the native ember select view doesn't offer this but it would be nice to have.

Hi,

Are there any examples of using optionTemplate and optionView? Also looking for examples on callbacks after option gets selected.

Thanks.

Sorry for my ignorance, but I can't seem to find a way to trigger an event when a selection has been made. Is this possible?

If optionTemplate is set the component fails.

When using the stylesheets from the dist folder in selectize, the themed ones (e.g. bootstrap3) are actually compiled less stylesheets which include the base styles. Including selectize.css also just doubles the size of the css getting imported.

Notice how large selectize.bootstrap3.css is, and how similar it is to selectize.css.
https://github.com/brianreavis/selectize.js/blob/master/dist/css/selectize.bootstrap3.css

I have the following summarized setup:

var Group = DS.Model.extends({
  items: DS.hasMany("item")
});

var Item = DS.Model.extends({
  group: DS.belongsTo("group")
});

var GroupController = Ember.Controller.extends({
  // routed from /group/{:group_id}
   choices: function () {
      return this.store.find("item");
   }
});

{{ember-selectize 
   selection=model.items.content  // <=== it's a promise, use .content
   content=choices
   multiple=true
}}

Which means that every time I change the group, all the items of the initial group are unloaded one by one, then all the items of the new group are loaded one by one, which means a lot of observers are being called. The loading time is noticeable (~ 1-2 seconds or more).

Aren't there any intelligent spots where using Ember.run.debounce (http://emberjs.com/api/classes/Ember.run.html#method_debounce) would be a good idea to obtain a more reactive UI ?

After the content=controller.items get binded, if you add a new item to controller.items - it doesn't show up in the dropdown.

How can I force "refresh"?

selection property is usually a single value, but selectize expects an object has has a value path and a label path. What is the proper way to handle this situation.

currently we manually trigger selectionDidChange in contentArrayDidChange, however if labels don't exist, then the options will not be added prior to triggering this event (and addItems will not work because you cannot addItems prior to addOptions).

solution should be (I believe) updating _labelDidChange to the following:

_labelDidChange: function(sender) {
    if (!this._selectize) { return; }
    var data = {
      label: get(sender, this.get('_labelPath')),
      value: get(sender, this.get('_valuePath')),
      data: sender
    };
    if(this._selectize.getOption(data.value).length !== 0) {
      this._selectize.updateOption(data.value, data);
    } else {
      this.objectWasAdded(sender);
      this._selectionDidChange();
    }
  },

The controller can't be overwritten (always set to the component instance) and the actions aren't sent.

Mainly due to improper use of actions coming from a component.

This is a little concerning because it makes writing integration tests more difficult.

To Reproduce

1. ember s
2. go to http://localhost:4200

You'll see
Uncaught TypeError: Cannot set property '_elementInserted' of null
in your JavaScript console

onItemAdd: Ember.run.bind(this, '_onItemAdd'),
onItemRemove: Ember.run.bind(this, '_onItemRemove'),
onType: Ember.run.bind(this, '_onType')

How to make use of this options to insert new selection, remove selection?

Trying to use this component but getting this rather strange look on the UI. For some reason it is showing two inputs, a "normal" input and then the select on top of it:

Nothing strange on the component options:

{{ember-selectize
      content=cilindros
      optionValuePath="content.id"
      optionLabelPath="content.codigo"
      selection=selectedCilindro
      placeholder="Select an option"
    }}

It seems to be related with styling. My app is using ember 1.9, handlebars 2.0, jquery 2.1.2 and bootstrap 3.3.1.

Any ideas?

Hey,

My use case a pretty simple, I define my options in an array of objects like so:

frequencies = [
    {value: 'annualy',  label: 'Annualy'},
    {value: 'quaterly', label: 'Quaterly'},
    {value: 'monthly',  label: 'Monthly'}
]

Then I have a model that has a frequency field. Obviously, I simply want the value, not the entire object from the above frequencies array. So I create a selectize like so:

{{ember-selectize
    content=frequencies // this is the above array
    optionValuePath="content.value"
    optionLabelPath="content.label"
    selection=frequency // this is the model frequency
    placeholder="Select a frequency"
}}

Selection doesn't work and when I select something, it sets frequency to the full object {}, not the value alone. This is very counter-intuitive to me since I can't think of any use case where you'd want the entire object. Am I doing something wrong? I'd like to avoid creating virtual attributes simply to work with selectize.

Thanks!

optionTemplate,itemTemplate,optionCreateTemplate,optgroupHeaderTemplate,optgroupTemplate, optionView,itemView,optionCreateView,optgroupHeaderView and optgroupView

basically using the above-mentioned properties would cause ember throw an error saying view.renderToBuffer() is no longer available. we should find a workaround for this. Maybe get the string representation of rendered view this way:

      _getStringFromView:function(view){
           view.createElement();
           return view.element.outerHTML
      },

i can get it done if you want

The addon currently unconditionally includes the bower_components/selectize/dist/css/selectize.css stylesheet. My Ember app is using Bootstrap 3, though, so this doesn't look so great. I was able to get things to look nice by changing index.js to use selectize.bootstrap3.css, but it would be nicer to have a way to configure which stylesheet is included.

I'm not familiar with developing Ember CLI addons or Node applications in general, and I don't see anything of obvious use in the Ember CLI documentation. If you have any idea how this could be implemented, I'd be happy to implement the feature myself and send you a PR.

The bower directory can be renamed to anything else (e.g. vendor).
It's better to change hardcoded bower paths from this:

app.import('bower_components/selectize/dist/js/standalone/selectize.js');

to this:

app.import(app.bowerDirectory + '/selectize/dist/js/standalone/selectize.js');

I want to search multiple field, so i add searchField property in controller:

export default Ember.Controller.extend({
    searchField: ["label", "value"]
});

and template:

{{ember-selectize
 selection=postId
 content=postOptions
 optionValuePath="content.id"
 optionLabelPath="content.value"
 multiple=false
 searchField=searchField
}}

but not working, it still only search lable field, how to set searchField?
Thanks.

Hello!

Trying to call the component such that

{{ember-selectize content=content optionValuePath=optionValuePath optionLabelPath=optionLabelPath value=value disabled=disabled}}

Where value="some value present in the optionValuePath" Does not reflect on the component's selection and sets that value to undefined

Right now if I want to lazy load my data, any selected items are showing up as 'undefined' until that relationship resolves. It would be nice to have the option to use an empty string instead so values elegantly appear, and when re-visiting a route rendering can appear far quicker even if options are updated in the background.

Great plugin! Thanks for the effort, works flawlessly out of the box

I'm wondering if it is possible to get the events callback information.

My use case is I have a manage route where there are multiple elements that may or may not be there in the db, and this list could be added to. However these elements aren't directly on the model but computed properties based on the relations in the database. When I remove an element from this list I need to know about it so I can update the element in the database (as this is a computed property on the model)

I hope that use case is clear, if not let me know

Would be nice if the plugins array could be specified. It'll most likely have to be done in the user's config/environment.js.

Does this component support remote searching?

Is anyone really using it?
It is really a pain to maintain, adds a lot of dependencies and we all should be moving towards ember cli.

I was just checking here if someone is actually using it.

It appears once an option is set, we lose the ability to deselect it as that "null" value goes away completely. It appears this should be supported in selectize provided we include a "null" option as the first item.

Is this a bug or am I missing the proper implementation approach?

Hi!

When updated to new ember 1.13.0-beta.1 I got this deprecation

Ember Inspector (Deprecation Trace): A property of <iframe@view:-outlet::ember658> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation.

        at CoreView.default.extend.scheduleRevalidate (http://localhost:4200/assets/vendor.js:53456:24)
        at http://localhost:4200/assets/vendor.js:20942:32
        at Object.Stream.notifySubscribers (http://localhost:4200/assets/vendor.js:28926:11)
        at Object.Stream.notifyExcept (http://localhost:4200/assets/vendor.js:28866:14)
        at Object.Stream.notify (http://localhost:4200/assets/vendor.js:28860:12)
        at Object.Stream.notifySubscribers (http://localhost:4200/assets/vendor.js:28928:20)
        at Object.Stream.notifyExcept (http://localhost:4200/assets/vendor.js:28866:14)
        at Object.Stream.notify (http://localhost:4200/assets/vendor.js:28860:12)
        at Object.apply (http://localhost:4200/assets/vendor.js:29968:18)
        at Object.sendEvent (http://localhost:4200/assets/vendor.js:24338:17)

The first demo shows an example of a multi-select that supports adding new items. Two questions:

1. What's the API for implementing this? I tried setting create=true on the component.
2. Is this also available for single-selects?

Several options available in Selectize are not settable on the ember-selectize component. The one I need right now is closeAfterSelect. Is there a technical reason for it not to be available, or would it be possible to add it ?

We're having some trouble when binding value to a query param, with null/undefined. Is there any way to disable two-way binding? Ideally the change would only send out an action, rather than updating the value that was passed in.

I can't get optgroup field to work correctly. I get only on item, and it's the first group; no other groups show up.

// data
{
  name: 'one',
  optgroup: 'group1'
}

{{ember-selectize content=specifics
  multiple=true
  optgroupLabelField='optgroup'
  optgroupValueField='optgroup'
  optionLabelPath='content.name'
  selection=selectedSpecifics
  class='form-control'}}

I have the following ember-selectize component:

{{ember-selectize placeholder="Choose products..."
              content=controllers.products.model
              selection=controllers.cycle.tempProducts
              optionValuePath="content.id"
              optionLabelPath="content.name"
              multiple=true
              create-item="createNewProduct"}}

I can confirm that createNewProduct is creating a new object and adding it to the content array, and is also being added to the selection array. However, the new item does not appear in the ember-selectize input.

Update: I should also add that the newly-created object does not appear in either the input as a selection or in the dropdown as part of the content.

A demo page with some examples in the dummy app would be great.

This commit a4da167 made maxItems default to null. Selectize defaults this to 1. I'm not sure if setting maxItems=1 for single selects or maxItems=null (or whatever number) for multiple selects makes more sense. What do you think?

In any case, something should be added to the README explaining how to use.

Bad error, the package is not installed correctly.
(Path or pattern "bower_components/selectize/dist/js/standalone/selectize.js" did not match any files)

This is the error:

Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
  at /Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/models/project.js:482:53
  at baseFindIndex (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/lodash/internal/baseFindIndex.js:16:9)
  at /Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/lodash/internal/createFind.js:18:19
  at Project.findAddonByName (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/models/project.js:481:20)
  at Class.module.exports.Task.extend.findDefaultBlueprintName (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/tasks/addon-install.js:63:30)
  at Class.module.exports.Task.extend.installBlueprint (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/tasks/addon-install.js:52:30)
  at Class.<anonymous> (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/tasks/addon-install.js:42:19)
  at lib$rsvp$$internal$$tryCatch (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:489:16)
  at lib$rsvp$$internal$$invokeCallback (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:501:17)
  at lib$rsvp$$internal$$publish (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:472:11)
  at lib$rsvp$asap$$flush (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1290:9)
  at process._tickCallback (node.js:355:11)

Hi,

First, I try to use selectize to select element that are then added to list. But I don't want selectize to actually list the selected element (I want it to remain blank all the time). I also want the list of items to update, so only the element that haven't been selected yet are available.

So I have the following selectize:

// template
{{ember-selectize
  placeholder="Search available metrics"
  content=remainingItems
  optionValuePath="content.id"
  optionLabelPath="content.name"
  selection=selectedItems
  closeAfterSelect=true
}}

// controller
remainingItems: function () {
  var selected = this.get('selectedItems');
  return _.difference(allItems, selected);
}.property('model.items.@each')

That's the short version of the code, it works. The only problem is that when I select an item the dropdown closes and reopens right away. It closes because of the closeAfterSelect option and reopens I don't know why. If I set the option to false, then it stays open and doesn't blink.

I was thinking of a way to trigger a blur on selectize but it really feels hacky. Do you have any suggestion? Thanks!

After upgrading Ember to ember 1.11 and running npm update on the rest of packages, the addon stopped working correctly. the content property is set an array of 200 elements but only one option is rendered which corresponds to the first array element. I tried optionFunction, optionView and other stuff but it always renders a single item no matter what. Any thoughts?

After my issue #68 (thanks for quick solving!) i've updated to 0.3.2 and had an error:

Uncaught Error: Could not find module `ember-new-computed` imported from `ember-cli-selectize/components/ember-selectize`

I guess i can be connected to ember-cli so, i leave here its version.
I use [email protected] and [email protected]

Just noticed that the selected property doesn't work when the passed value is a promise.

Example

//models/task.js
export default DS.Model.extend({
  project: DS.BelongsTo('project', {async: true}) //returns a promise.
});

//controllers/task.js
export default Ember.Controller.extend({
  projects: Ember.computed.readOnly('injected-projects'),

  actions: {
    projectSelected: function(project) {
       var model = this.get('model');
       model.set('project', project);
    }
  }
});

//templates/task.hbs
{{ember-select 
  projects=projects 
  selected=model.project 
  select-item="projectSelected" 
  optionLabelPath="name"
}}

This works if I change the relationship to non async.

@miguelcobain what are your thoughts on this? Is this something that should be supported?

Currently I have three {{ember-selectize}} elements on the page all bound to a single property but from different collections / content. If I selected one option in the first selectize and the another option in the second, should the first be cleared? Currently not happening like that. Do I need to have them all coming from the same content?

I am using the selectize component with the most minimal configuration and for some reason the "placeholder" functionality is not working. I have tried setting both placeholder and prompt attributes but in both cases it is ignored (with no JS errors to indicate a problem).

My environment is running on OSX:

version: 0.1.3
valid watchman found, version: [3.0.0]
http_parser: 1.0
node: 0.10.33
v8: 3.14.5.9
ares: 1.9.0-DEV
uv: 0.10.29
zlib: 1.2.3
modules: 11
openssl: 1.0.1j
npm: 2.1.10

I have a DS.PromiseArray on my controller called workoutTemplates. The fulfilled promise delivers a DS.RecordsArray where each record has both id and name properties. Hopefully this is clear, I think it should represent a fairly normal use-case for folks using ember-data. In my case, however, I can not find the right settings for optionValuePath and optionLabelPath.

Here is what I would have thought would work:

{{ember-selectize
    content=workoutTemplates
    optionValuePath="content.content.content.id"
    optionLabelPath="content.content.content.name"
    selection=workoutId
    placeholder="Select an option" 
}}

This is based on the following snapshot from the Ember Inspector (which is pointed at the selectize component):

This configuration results in no options, interestingly if I instead use the path of content.id and content.name I get 6 items (the right number) but each are listed as 'undefined'.

Awesome work on this so far and I hope this is a simple case of pointing in the right direction.

I am running into issues when the content changes during tear down of the component. It appears the _onItemRemove function is being called thus setting the value to null. I think moving to the data down actions up methodology will fix this problem.

So before I attempt this I thought I would ask how should this work?

I feel this component should two way bind a value as well a support ddau. I am thinking the value property should be a two way binding and selection a one way binding.

So one can either use the value property or the selection property with the select-item action.

Is this a good approach?