Answers

• allan Posts: 63,180Questions: 1Answers: 10,411 Site admin

  January 2016

  I've just tried setting this up locally with:

  {
      label: "Site:",
      name: "users.site",
      type: "selectize"
  }, {
      label: "Selectize 2:",
      name: "s2",
      type: "selectize",
      options: [ { label: 1, value: 2 } ]
  }, {
      label: "Selectize 3:",
      name: "s3",
      type: "selectize",
      options: [ { label: 3, value: 4 } ]
  }
  

  But they appear to operate as expected. I can only ever see a single selectize list, regardless of inline of main editing mode.

  What version of Selectize are you using?

  I'm afraid I probably will need a test case for this one, unless you can give me instructions on how to reproduce the issue.

  Allan
• ozzeruk82 Posts: 5Questions: 2Answers: 0

  January 2016 edited December 2020

  Thanks for your advice Allan. I'm pleased to be able to offer a test case online.

  Using Firefox:

  [retracted]

  It will log in and be at a setup wizard - go directly to this URL:

  [retracted]

  In 'context', choose the bottom option 'SMST - SMS Test Co' (as it has the relevant data). Press tab, it will go to the next field. Look towards the top left of the screen, you will see the problem.

  You can press tab again and click the other fields, the first 4 are selectize fields. The problem appears and disappears at regular intervals when these fields are changed.

  The problem is most obvious on Firefox - on Internet Explorer you see a scrollbar in the top left of the screen after tabbing twice. On Chrome the problem doesn't seem to exist.

  I have done quite a bit of investigating myself. The issue is that the dropdown menus have style='display: block' at certain moments when they are in theory hidden, when they should have 'display: none;'

  Here is a grab of the HTML using Firebug in Firefox when the issue is occurring.

  <div class="selectize-dropdown single" style="display: none; visibility: visible; width: 100px; top: 0px; left: 0px;">
  <div class="selectize-dropdown single" style="display: none; visibility: visible; width: 100px; top: 0px; left: 0px;">
  <div class="selectize-dropdown single" style="display: block; visibility: visible; width: 181px; top: 330.2px; left: 591.867px;">
  <div class="selectize-dropdown single" style="display: block; visibility: visible; width: 100px; top: 0px; left: 0px;">
  

  As you can see the 4th selectize item has 'display: block' when it should be hidden.

  From playing around with it it seems that changing the contents of the selectize element is directly related to the problem.

  I respond to the change event, changing other fields where needed. The code works well and does what is intended. Here is a cut down version.

  $(editor.field('Context.code').node() ).on('change', function ()  // change event
  {
  
  .....
  
  editor.field('Activity.code').update(js_array_activities);   // update contents of other selectize
  

  Hope that offers a good suggestion as to what the issue may be. If you have any suggestions at all then it would be great to hear them. We love Datatables and use it elsewhere in our software, it's just this page and this one particular problem that has left us frustrated.

  Many thanks in advance.

  Oli

  Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,180Questions: 1Answers: 10,411 Site admin

  January 2016

  Hi Oli,

  Thanks for the test case! Super useful - also interesting that it primarily seems to be Firefox that is effected.

  I've been doing some work based on the information you've given and I believe it can actually be fixed fairly easily:

  Search the editor.selectize.js file for:

  selectize.refreshOptions();
  

  and simply replace with:

  selectize.refreshOptions(false);
  

  The issue is that Selectize will trigger the dropdown by default if the false option is not passed in.

  I'll publish the update to the plug-in on the site soon.

  Regards,
  Allan
• ozzeruk82 Posts: 5Questions: 2Answers: 0

  January 2016

  Hi Allan,

  Thanks for the suggestion, that one line change didn't fix it but it did lead me directly to the solution.

  To fix edit editor.selectize.js and on line 143 change to the following.

      update: function ( conf, options ) {
  
          var selectize = conf._selectize;
  
          selectize.clearOptions();
          selectize.addOption( options );
          selectize.refreshOptions(false);
  
  //  _fieldTypes.selectize._addOptions( conf, options ); // old code
      }
  

  This simply made your refreshOptions(false) suggestion execute during an 'update' call.

  Tested on Firefox, IE and Chrome and appears to work fine. Not sure if your additional line change further up is needed as well for other function calls.

  Regards,

  Oli
• allan Posts: 63,180Questions: 1Answers: 10,411 Site admin

  January 2016

  Hi Oli,

  Thanks for posting back with your fix. Good to hear you've got it working now.

  What is odd is that the code you have used in the update method is just basically all that the _addOptions function would execute itself. I'm not immediately clean on why executing it in the update function instead would make any difference.

  Allan
• ozzeruk82 Posts: 5Questions: 2Answers: 0

  January 2016

  It's a bit of a mystery then, but certainly, doing the latter has had the desired effect.