CODEWITHSUNDEEP
jqueryonfocusselectize.js
Michael
Michael

Reputation: 31

Selectize.js onFocus callback not working

I have a drop down select box using the jquery Selectize.js plugin. What I want it to do is not display the drop down selections when tabbing to the field, but still open up the drop down by any other means.

I have set 'openOnFocus: false' to prevent it from opening the drop down when it first gains focus, which works. But I don't want the user to have to double click if using a mouse. So I tried setting up the onFocus callback to check if the tab key was pressed, and if not, then give it focus again. The onFocus doesn't seem to ever fire. I added Console.log to verify that it isn't. Any advice? Is there a better way to go about this? Thanks!

Here is my code.

$("#branch_entry").selectize({      
  hideSelected: true,               
  sortField: "value",               
  openOnFocus: false,
  onFocus: function() {
    console.log("focus");                                      
    var code = e.keyCode || e.which;
    if (code != 9) {    // not tab  
      $("#branch_entry").focus();   
    }                               
  }                                 
});

Upvotes: 3

Views: 5831

Answers (1)

alemv
alemv

Reputation: 1096

I think you have to handle the click event in the selectize input element and call the selectize.open() method.

HTML:

<div id="branch_entry-div">
  <select id="branch_entry">
    <option value="0">Item 0</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
  </select>
</div>

JavaScript:

$("#branch_entry").selectize({      
  hideSelected: true,               
  sortField: "value",               
  openOnFocus: false
});
$("#branch_entry-div .selectize-input").on('click', function() {
  $("#branch_entry")[0].selectize.open();
});

jsFiddle Demo

Upvotes: 2

Related Questions