Option to deselect about ember-cli-selectize HOT 14 CLOSED

Small update: I can see that we have a cursor and can delete the item in the select box, this is a bit or a departure from the norm, it would be nice to have either a button to click or a 'clear' option in the dropdown.

from ember-cli-selectize.

I'm starting to realize this is a selectize request.

from ember-cli-selectize.

I thought so. :)
I use the "remove_button" selectize plugin which should be enabled by default on ember-cli-selectize.

http://brianreavis.github.io/selectize.js/ (tab plugins, section "remove_button").

from ember-cli-selectize.

hmmm not seeing it enabled by default.... or do you mean included by default?

from ember-cli-selectize.

I mean enabled (this plugin only works in multiple selects, i.e when multiple=true).

Here is the array:
https://github.com/miguelcobain/ember-cli-selectize/blob/master/addon%2Fcomponents%2Fember-selectize.js#L41

from ember-cli-selectize.

ah! yes multiselect only 👍

thats cool, ill see what we can do for everything else. comparing it to select2 which has a clear button available for single items.

from ember-cli-selectize.

That is indeed something related with selectize.
Please link here if you find what you're looking for. Thanks.

from ember-cli-selectize.

Just occured to me that a possible workaround might be to use multiple=true and maxItems=1.
But don't know how that would work. The selection property would be an array and you would need the add action. So, probably not the ideal solution.

from ember-cli-selectize.

yeah, im thinking i just throw in a button and just have the action clear out the bound property for now, but it would be nice if somewhere down the road (whether that be in a selectize addon or here) that we have an option to tack on a close button that's right justified.

from ember-cli-selectize.

Selectize is quite extensible.
You could try to write a selectize plugin similar to "remove_button".
The plugin could just display an "x" next to the "carret down" symbol.

More info on selectize's extensibility: https://github.com/brianreavis/selectize.js/blob/master/docs/plugins.md

from ember-cli-selectize.

There is plugin for that https://gist.github.com/jumika/abe412f1aa2b24ea86e6 and even modification of original remove_button, but change does not propagate to ember. @miguelcobain any idea why clear() does not work?

export function initialize() {
  Selectize.define('clear_selection', function (options) {
    var self = this;
    var settings = $.extend({
      title: 'Clear selection'
    }, options);

    //Overriding because, ideally you wouldn't use header & clear_selection simultaneously
    self.plugins.settings.dropdown_header = {
      title: settings.title
    };
    this.require('dropdown_header');

    self.setup = (function () {
      var original = self.setup;

      return function () {
        original.apply(this, arguments);
        this.$dropdown.find('.selectize-dropdown-header').addClass('clear-selection').on('mousedown', function ( e ) {
          self.clear();
          self.close();
          self.blur();

          return false;
        });
      }
    })();
  });
}

export default {
  name: 'selectize-clear',
  initialize: initialize
};

from ember-cli-selectize.

@Keeo ember-selectize doesn't update on clear because we're not handling the clear event selectize emits: https://github.com/brianreavis/selectize.js/blob/master/docs/events.md

Setting selection to null on the clear event should make that plugin work.

from ember-cli-selectize.

Thanks, do you want PR? Something like this:

// component
var options = {
  onClear: Ember.run.bind(this, '_clear')
};

_clear(){
  this.set('selection', null);
},

// initializer
// copy of code above

from ember-cli-selectize.

A PR for that would be great!

from ember-cli-selectize.