When using multiple Selectize.js inline fields - all render when just one should

ozzeruk82

(Firstly very sorry for not following the guidelines about posting an example etc - the site is behind a firewall on a company LAN - and to create an example would take a good while - I will do it if needed - but the bug is clear - so I'm posting this in case the answer is obvious)

When using Datatables+Editor and having multiple 'Selectize' fields (the special type of Select field that uses the Selectize.js library) with the inline editing mode other non selected/non active Selectize dropdowns become visible and active in the top left of the screen when editing a Selectize field. They appear to be at co-ords of 0,0. The desired Selectize dropdown appears at the correct location.

The bug is that they all become visible when only the desired Selectize dropdown should become visible.

So for example - I have 5 columns, 3 are Selectize fields. I click into the first field, the Selectize dropdown appears and works great - however - in the top left of the browser window (same on Chrome and Firefox) I can see at least one of the other Selectize dropdowns with its values visible. I can even move up there and scroll through the values.

It seems that on launching one Selectize dropdown, all the others are also getting 'launched'.

The bug is not present with standard Select fields.

I have tried editing the js files to fix it myself, but with no luck, so am posting this in the hope that others have come across the issue and know of a fix?

allan

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

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

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

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

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

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