Selectize.js: Cannot type into selectize dropdown after selection made

[thoward-yp]

In the selectize example page (http://brianreavis.github.io/selectize.js/) , if you choose a selection in the "singe item select" section, like "Chuck Testa," then click on the dropdown again and try to enter text, you cannot. For some reason input is blocked except to go up and down with the arrow keys to make a selection via the dropdown. Please see attached screen shot.

[zukilover]

I think that's an intended behavior. You cannot type on an active item, you need to firstly remove it before entering new queries.

[janscas]

Is there any plugin to allow this?? The normal behaviour is to allow input when typing. That's how select2 and chosen work also...

[janscas]

This is solved in #647 You have the plugin here:

https://github.com/brianreavis/selectize.js/commit/5d81539d677e8c2411215a1fb81789a8006c77f2

[janscas]

There's also another problem with this solution. You use set_Value un event blur and this triggers "item_add" event but you are not really selecting anything.

[avranu]

I tried luanfonceca's solution in #647, but found it contained an infinite loop and a few bugs. I'm guessing it was created for an older version of selectize.

I made several changes and got it working the way I expected. Code is below.

/**
 * Typing mode plugin by Luan Fonseca
 * December 2014
 * https://github.com/brianreavis/selectize.js/blob/5d81539d677e8c2411215a1fb81789a8006c77f2/src/plugins/typing_mode/plugin.js#L1
 *
 * Modified by Jess Mann
 * June 2017
 *
 * Selectize version 0.12.4
 */
Selectize.define('typing_mode', function(options) {
        var self = this;

        this.setup = (function() {
                var original = self.setup;
                self.updating = false;

                return function() {
                        original.apply(this, arguments);

                        this.on('dropdown_open', function() {
                                self.previousValue = self.getValue();
                                var option = self.getOption(self.previousValue);

                                /**
                                 * Two styles: 
                                 *     1) usePlaceholder gives an immediately blank field to type into
                                 *     2) default shows the text and allows user to edit last selection
                                 */
                                if (self.settings.usePlaceholder) {
                                        self.$control_input.attr('placeholder', option.text().trim());
                                } else {
                                        self.$control_input.attr('value', option.text().trim());
                                }

                                self.$control_input.css({
                                        opacity: '1',
                                        width: '100%',
                                        position: 'relative'
                                });
                                self.$control.find('.item').hide();

                                self.items = [];
                                self.setCaret(0);
                        });

                        this.$control_input.on('blur', function() {
                                self.$control.find('.item').show();

                                /**
                                 * I played with testing self.settings.allowEmptyOption
                                 *     before reverting to the previous value,
                                 *     but that doesn't seem to be intuitive behavior.
                                 *
                                 * Use the current value, or, if empty, set to the previous value
                                 */
                                var value = self.getValue() || self.previousValue;

                                /**
                                 * Avoid infinite loop. self.setValue calls blur() again
                                 *     even if we pass true to the second param.
                                 */
                                if (self.updating)
                                        return;

                                self.updating = true;
                                self.setValue(value);
                                self.updating = false;
                        });
                };
        })();
});

To use the plugin, include "typing_mode" in the plugins array, when you instantiate selectize. For example:

$('select').selectize({
    plugins: ['typing_mode'],
    persist: false,
    create: true
});

A new settings option was added: "_usePlaceholder_".

• If true, it uses Luan's original design, replacing the visible value with a placeholder, and then replacing it if nothing is selected.
• If false, it uses a (possibly) more intuitive feel, where the previous value is immediately editable, just like you never left the text area to begin with.

[pagegwood]

Here's my workaround for this:

onFocus : function (){
      $activeSelect = $select[0].selectize;
      $value = $activeSelect.getValue();
       if ($value.length > 0) {
             $activeSelect.clear(silent = true);
       }
}

[ldipenti]

@pagegwood thanks for this! I added this right after the clear() call to be able to allow a user to have the feeling of a simple input text edit behavior:

$activeSelect.setTextboxValue($value)

[uaoleg]

I've done pretty the same as @pagegwood but with keeping text of previously selected option:

onFocus: function (){
    var value = this.getValue();
    if (value.length > 0) {
        this.clear(true);
        this.$control_input.val(value);
    }
}

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days