Selectize.js: How to toggle open/close dropdown by clickin in control(.selectize-input)?

[russeljo]

(sorry, for my bad english, hope you'll understand my problem)
I need to close dropdown when click in .selectize-input,
like when you click outside .selectize-input.
I try something like this(code below), but it work only first time clicking (dropdown is closed),
after that dropdown not dropp, because .selectize-input is still focused(all classes - focus & .input-active is still exist).
I have to click outside .selectize-input to unFocus, then foucus is off and dropdown is drop again when i click on .selectize-input.

```
jQuery('.selectize-input').on('mousedown',function(e){
if(jQuery(this).parent('.selectize-control.multi').hasClass('multi')){
var $select = jQuery(this).parent('.selectize-control.multi').siblings('.selectized');
var selectize = $select[0].selectize;

     if (selectize.isFocused){
        selectize.close();  //dropdown close, but control stil is focused 

        console.log('blur on click inside', e.target.nodeName);
     }else{
        console.log('out of focus');
     }
  }

});
```

[corescan]

I experience similar behavior, if i understand the OP correctly. I cannot "toggle" the dropdown by clicking the input area, which would be the expected behavior coming from a native select control.
When i click the input while dropdown is open, dropdown quickly flashes closed then open again. It seems as though there are too many event listeners registered to closing/opening the dropdown, making this behavior annoying clunky.

[Erbenos]

Experiencing the same issue.

[mdaguerre]

I'm having the same issue here. When i click on the arrow icon to close it doesn't work, this is only happening when is a multiple select. Any ideas?

[dominicgan]

Experiencing the same issue as @corescan. I found it to be caused by this line (hotfix for removing focus on ios on-screen keyboard):

https://github.com/selectize/selectize.js/blob/master/src/selectize.js#L1776

Commenting this line out fixes the bug for me, at the expense of having to manually close the on screen keyboard on ios. Tried looking through the onBlur function but I couldn't figure out what was specifically causing the dropdown to re-open after closing.

[hdodov]

I had the same issue but I noticed the following:

• When the input is not focused and you click, first fires the onFocus event and then a click event on this.$control
• When you click on the input _while_ it is focused and the dropdown is shown, it's the opposite - first fires onBlur, then click and finally onFocus

Basically, you don't want to have the dropdown open immediately after this.$control has received a click, as in the second scenario. Here's how I made it work:

$(".foo").selectize({
    openOnFocus: false,

    onInitialize: function () {
        var that = this;

        this.$control.on("click", function () {
            that.ignoreFocusOpen = true;
            setTimeout(function () {
                that.ignoreFocusOpen = false;
            }, 50);
        });
    },

    onFocus: function () {
        if (!this.ignoreFocusOpen) {
            this.open();
        }
    }
});

You get the same functionality as with openOnFocus set to true, except you don't get this strange unable-to-close behavior.
The setTimeout might scare you, but it's legit. The actual time difference between the click and onFocus is not controlled by the user and is usually about 2-5 milliseconds. Waiting for 50 is more than enough to prevent unexpected behavior.

Tested on all major browsers + IE11. Works perfectly.

[aledmb]

@hdodov that's great and it works, but i wonder if this will eventually break my app at some point when a new update comes out... i guess we just have to keep an eye on it, right?

thanks for sharing it!

[amackaurea]

The fix does not seem to work for multiselect, any ideas?

[erikkubica]

Noone noticed that this "solution" messes up the icon? It´s closed but it indicates that it´s open. On mobile you need to click/tap twice on dropdown to open it...

[kfir91]

Any solution to solve ?
its not toggling its only open and if i click again its do nothing...

[SnowDiamond]

I solved this issue by unbinding all events from $control, and all click events from input. You may write any events by yourself.

class SelectWidget {
  constructor(el) {
    this.select = el.selectize(this.options())[0].selectize
    this.focus = false
    this.bindEvents()
  }

  bindEvents() {
    this.select.$control.unbind()
    this.select.$control.find('input').off('click', '**')
    this.handleOpenClose()
  }

  handleOpenClose() {
    this.select.$control.click(() => {
      if (this.focus) {
        this.select.close()
        this.toggleFocus(false)
      } else {
        this.select.open()
        this.toggleFocus(true)
      }
    })
  }

  toggleFocus(focus) {
    this.focus = focus
  }

  options() {
    return {
      openOnFocus: false
    }
  }
}

new SelectWidget($('.some-select'))

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days