clicking on scrollbar causes dropdown to close

1st4connect

We are facing an issue with editor plugin and selectize dropdown. In Chrome and Edge browsers, clicking on dropdown scroll closes the dropdown.

We have created a scenario. https://jsfiddle.net/muhammad_atif/3xntu5we/37/

Your help will be highly appreciated.

allan

Hi,

Thanks for the test case. This is a slightly tricky one because Selectize doesn't work in the way Editor expects field inputs to do so...

Plug-ins for Editor can define an owns function which let's it tell the Editor core if the element being clicked on is part of the input's elements or not. Typically this would mean seeing if the element clicked on is part of the Selectize drop down list.

But, Selectize doesn't use click as the event listener - my guess (I haven't checked its source) is that it is used mousedown, so by the time Editor sees the click, the dropdown menu has already gone.

We can workaround it a bit, since the result of this is that the click event target is the body or html document, so you can relatively safely assume that if the target for the click is one of those elements, then we were previously inside a Selectize dropdown.

Long story short, add:

    owns: function ( conf, node ) {
            // Selectize doesn't use `click` to blur - possibly mousedown? By the time this method runs
        // the Selectize menu has been removed and isn't even the event.target any more - the document
        // is, so we check for that.
        if ( node === document.body || node === document.documentElement ) {
            return true;
        }
        return false;
    },

to your Selectize plug-in for Editor. Updated example.

Regards,
Allan

1st4connect

Dear Allan

Thanks for your reply.

It didn't solved the problem. I have attached a video link to show the actual problem.

http://sms4parents.com/BF1EF4A9-AE33-4409-8FF6-8FF7FF8DC176.MP4

Regards,

allan

Thanks for the video. It looks like it is to do with an incompatibility between KeyTable and Selectize. If you remove KeyTable is appears to work.

Similar to how Editor needs to know if an element is part of the form input or not, KeyTable also needs to know that information - that is done here (and the following few conditions).

To resolve what you are seeing and keep KeyTable support (which I'm not sure works very well with Selectize anyway?) then an extra condition would need to be added to your local copy of KeyTable to address that.

Allan