Selectize.js: Link on dropdown

[hacktivista]

I'm trying to put a link on a selectize dropdown in order to allow the user make an operation other than select an item while still allowing that the user selects the item as main option.

Here is an example of what I want to achieve (but is not working as expected):

What I did is plainly insert links on the HTML. But it's not working, I suppose that for some kind of event propagation stop, is it possible to achieve with selectize?

What I want to achieve is to make it follow the link when clicked.

Here a fiddle for eager hands: http://jsfiddle.net/uetpjpa9

[joallard]

Sorry, our issues tracker is full and can't deal with such hypothetical questions. I'm afraid this is out of scope and you'll need to seek help on another channel.

[hacktivista]

@joallard I did, but got no answers in 3 months, so I thought maybe here I could get help. Maybe you could give me a hint to investigate the issue

[joallard]

That happens, I guess that's going to take some debugging elbow grease. I wish I could help you, but I don't even know the answer, I'm just treading water in triaging bugs.

[nlwillia]

I posted an answer to the so question, and I'll add it here as well in case anyone else runs across this issue. I had the same problem and unfortunately it's fairly tricky to keep Selectize from responding to mousedown and blur and hiding the dropdown before the mouseup that would complete the click you're expecting has time to complete.

Here's a plugin that will rework the event wiring for a click on an element with the clickable class.

Selectize.define('option_click', function(options) {
    var self = this;
    var setup = self.setup;
    this.setup = function() {
        setup.apply(self, arguments);

        var clicking = false;

        // Detect click on a .clickable
        self.$dropdown_content.on('mousedown click', function(e) {
            if ($(e.target).hasClass('clickable')) {
                if (e.type === 'mousedown') {
                    clicking = true;
                    self.isFocused = false; // awful hack to defuse the document mousedown listener
                } else {
                    self.isFocused = true;
                    setTimeout(function() {
                        clicking = false; // wait until blur has been preempted
                    });
                }
            } else { // cleanup in case user right-clicked or dragged off the element
                clicking = false;
                self.isFocused = true;
            }
        });

        // Intercept default handlers
        self.$dropdown.off('mousedown click', '[data-selectable]').on('mousedown click', '[data-selectable]', function() {
            if (!clicking) {
                return self.onOptionSelect.apply(self, arguments);
            }
        });
        self.$control_input.off('blur').on('blur', function() {
            if (!clicking) {
                return self.onBlur.apply(self, arguments);
            }
        });
    }
});

Obviously, it would be better to address this inside Selectize itself, but the project doesn't look like it needs any more PRs just now. Hope this helps in the meantime.

[senasi]

I also had same problem and have found easier solution - no need to hack blur and focus events and it's easily doable without writing plugin (but it can be written as plugin for sure). This solution also use clickable class for elements which needs to be clickable.

$('.selectize-dropdown').on('mousedown', '[data-selectable] .clickable', function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
});

$('.selectize-dropdown').on('click', '[data-selectable] .clickable', function(event) {
    event.stopPropagation();
});

Trick is to bind these handlers directly on .selectize-dropdown (so it must already exist), then they will be called before selectize own handlers. First handler will completely prevent mousedown event, which means that also blur won't be triggered. Second handler will just prevent bubbling-up, but it will allow to execute own events of .clickable element - also native click on link will work.

[bdfinlayson]

There's a simpler option that might work @Hacktivista. When initializing Selectize, you can use the onDropdownOpen callback and set your event handler:

  $('#your-selectize-field-id').selectize
    onDropdownOpen: (dropdown) ->
      $(dropdown).on 'click', (event) ->
         event.preventDefault()
         event.stopImmediatePropagation()

[qianyinghuanmie]

I agree with senasi ,but you sure .selectize-dropdownmust already exist.