Issue with focus / click on component

[PhiLhoSoft]

I am aware of the Call for Maintainers, let say I create the issue for the record, for tracking purpose.
I hope I can submit a PR, or perhaps somebody else can take a look (if I fail or it I take too much time...).

I can reproduce the error in the demo page, on the Country Selector example: single selection, not editable.

If I click on the blank area, the drop down appears as expected.
If I click again, it disappears and the control is focused to input a search string.
So far, it works as expected...

First issue: if I click on the placeholder, ie. on the underlying text input control, the drop down doesn't appear. Looks like the control eats the event which doesn't bubble up. Not sure if that's easy to fix, but it is annoying.
Of course, if you click on the blank area, the drop down appears.

The problem is worse if we set the openOnFocus parameter to false. In this case, I have to click twice in the blank area to get the drop down (once to set the focus, another to get the drop down), and it is even more confusing if I clicked on the placeholder (see above...).
I do that because the the combo is the first control of a form in a dialog box and I don't want the drop down to hide other components. Others (see #730) might want to use it to avoid tabbing twice to exit the component while navigating with the keyboard.

I think the parameter should distinguish getting focus with the keyboard (or with autofocus / tab order) from getting focus from a click.
Or, just always show the drop down when we click on the component, whatever the value of this parameter. It isn't made for this case.

Side note: I had a quick look at the tests of the projects, as I don't plan to give an untested PR!
I see they simulate a click on the component, but I am not sure if it can distinguish click on the blank area vs. click on the placeholder... 😄 Will take a look at the doc of the library.

[PhiLhoSoft]

Mmm, browsing the code, I see:

        $control_input.on({
            mousedown : function(e) { e.stopPropagation(); },

so the first issue is actually deliberate.
Is there any compelling reason to have this behavior? I suppose so, but a line of comment would have helped... 😄

[PhiLhoSoft]

Investigated a bit more. The mousedown / stopPropagation line isn't the culprit, deactivating this doesn't change the behavior (at least on Chrome). Or I am doing something wrong...

[PhiLhoSoft]

I fixed that but it is a hack, in the sense it isn't fully tested (manually) and not tested at all in unit tests...
I give my fix here in case it can be useful to someone.
To avoid having a modified version of Selectize in our project, I monkey-patched it dynamically: in onInitialize, I get the Selectize instance, so I just call monkeyPatch(selectize) to apply my changes...
The patch:

        function monkeyPatch(selectize)
        {
            // Fix unwanted behavior for Selectize. Warning: might have side effects.
            // Note: this monkey patch should be applied only to single selection mode, not in tag mode:
            // the second patch (mousedown) is just unnecessary,
            // the first one (mousedown) disables selection of tags by clicking on them!

            selectize.$control.off('mousedown');
            selectize.$control_input.off('mousedown');
            selectize.$control.on('mousedown', function()
            {
                // We click on the control, so we have to set the focus on it!
                // Even if openOnFocus is false. Which is more to control the default focus (first item of a forum)
                // or focus on keyboard navigation (tab).
                selectize.isFocused = false; // Set focus
                selectize.onMouseDown.apply(selectize, arguments);
                selectize.isFocused = true; // Open drop-down if needed
                return selectize.onMouseDown.apply(selectize, arguments);
            });
            selectize.$control_input.on('mousedown', function(e)
            {
                // When we click on the input area (instead of the arrow), we want the drop-down to be toggled too.
                e.stopPropagation(); //Original behavior
                if (selectize.settings.mode === 'single')
                {
                    // toggle dropdown
                    if (selectize.isOpen) selectize.close(); else selectize.open();
                }
            });
        }

[DSoa]

I just delegate the mousedown event to the control like so:

selectize.$control_input.off('mousedown');
selectize.$control_input.on('mousedown', function (e) { s.$control.trigger('mousedown', e); });

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.