UX improvement: select all text in input on focus

[nugged]

when I press on drop-down triangle I have list and cursor blinking in the input field:

And yes, it that field definitely one whole item from the list, so I can't input any more letters but must press backspace, it erases all text, and I start to type new with pretty well-designed typeahead search.
Well.

But what if we will select all text in input on focus, so on any user input it will start a search from scratch, I mean no need to press backspace and just any first alphanumeric character pressed start to search new item?

Or if I just missed that option from manual, please, help/advice.
Or should I make it with a snippet, what should be there for 'focus' event below?
(how to get that $(this).{...somethow_get_to_that_internal_input_field...}.select(); working?)

$('#forminput_tz').selectize();
selectize.on('focus', function() {
    ... what should be here?
    $(this).{...somethow_get_to_that_internal_input_field...}.select(); ?
});

[thedustyrover]

+1 on this, this was my default UX expectation. With the current impl I think it would be hard to do as the label actually exists not within the input element, but a separate div. If selectize could populate the value directly into the text input and gave an option to select() whenever it gained focus, that would fulfill this request I think. But I imagine that it would be a breaking change to get rid of the div.

As a partial solution, I've done the following to add a css highlight to the div when the input has focus:

.selectize-input.input-active > .item {
    background:#CCC;
}

it gives the appearance that it's selected and an affordance that the user can backspace to remove it. The two downsides are:

1. difficult if not impossible to match the actual text-selection color, since that's dependent on browser/OS.
2. it's still only backspace that works, you cannot immediately start typing over it.

[thedustyrover]

I started on a crappy hack to get the "immediately start overwriting if a character is typed rather than requiring a backspace." I abandoned it because I didn't want to get into all the nitty-gritty of implementing the advanced keystroke checks, but here's a pointer if anyone else wants to go down that route:

$('.myInput')[0].selectize.$control_input.keydown(function(e) {
    var selectize = $('.myInput')[0].selectize;
    // if there exists a selection already and the text input is empty
    // otherwise if the selection is empty, the text input is already working like normal
    // same with non-empty text input, we don't want to interfere with regular typing
    if(selectize.items.length != 0 && selectize.$control_input.val() == '') {
        selectize.clear();
        selectize.$control_input.val(String.fromCharCode(e.keyCode));
    }
});

You'll need to do a lot more keypress checking to ensure that it was a printable character (and not say a Shift or Ctrl or some other non-printable key). And when overriding the text input val, you'll need to translate to the correct printable character (e.g. taking into account Shift).

Overall very hacky, I don't see a good way to impl this without just putting the values into the textbox itself. I think the use case here is for the simple single-select, but I see why selectize was implemented this way in order to support multi-select.

[alexcroox]

This would be useful, it's a very strange user experience to see a flashing cursor, but pressing a key does nothing, resulting in me believing it's not a text input at all...

[timvasil]

To piggy-back on @thedailynathan's hack, here's a slightly more involved hack that does more types of key checking to permit paste, etc. It's packaged as a plugin so it's opt-in.

(function() {
    'use strict';

    Selectize.define('TypeReplace', function(options) {
        var me = this;

        me.onKeyDown = (function() {
            var original = me.onKeyDown;
            return function(e) {
                if (me.settings.maxItems === 1) {
                    switch (e.keyCode) {
                        case 27: //KEY_ESC:
                        case 78: //KEY_N:
                        case 40: //KEY_DOWN:
                        case 80: //KEY_P:
                        case 38: //KEY_UP:
                        case 13: //KEY_RETURN:
                        case 37: //KEY_LEFT:
                        case 39: //KEY_RIGHT:
                        case 9: //KEY_TAB:
                        case 8: //KEY_BACKSPACE:
                        case 46: //KEY_DELETE:
                            break;

                        default:
                            me.deleteSelection({
                                keyCode: 8, //KEY_BACKSPACE
                                preventDefault: function() {},
                                stopPropagation: function() {}
                            });
                            return;
                    }
                }

                return original.apply(this, arguments);
            };
        }());
    });
}());

The corresponding CSS to show the highlight would be:

.selectize-control.single.plugin-TypeReplace .selectize-input.input-active > div {
    background-color: #338fff;
    color: #fff;
}

I experimented with using Highlight and HighlightText CSS colors, but these are deprecated and hard-coded on Chrome anyway: https://bugs.chromium.org/p/chromium/issues/detail?id=344399

[nugged]

Good to see this anyway lives and might be solved (even as #1104 :) )!

[h0lg]

Using jQuery, this approach works for me. I've added some code to preserve and re-populate the user's query.

var $selectized = $(".selectized"),
    lastQuery,
    api;

$selectized.selectize({
    //only for single select mode
    maxItems: 1, // same effect as mode: "single", but still documented

    //preserve query
    onType: function (query) { lastQuery = query; },

    onChange: function (value) {
        if (value !== "") {
            api.clear(); //remove selected item
            api.setTextboxValue(lastQuery); //re-populate search input

            //only for multi select mode
            // api.refreshOptions(bool reopenDropdown);

            //TODO whatever you want to do with the selected value
        }
    }
});

api = $selectized[0].selectize;

//use parent as event delegate in case selectize elements are not yet created
$selectized.parent().on("focusin", ".selectize-input input", function () {
    $(this).select(); //select all text in input
});

[javvkenn]

This solution might be late but it might be of help to someone. This will reopen the textbox for edit and select all the text when the use focuses on the element.

var select = $('select[name=\"$name\"]').selectize({}); var selectizeControl = select[0].selectize selectizeControl.on('focus', function() { var value = selectizeControl.getItem(selectizeControl.getValue()).text(); selectizeControl.clear(); //remove selected item selectizeControl.setTextboxValue(value); //re-populate search input $('input[type=select-one]').select(); });

[github-actions]

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

[anandphulwani]

This solution might be late but it might be of help to someone. This will reopen the textbox for edit and select all the text when the use focuses on the element.

var select = $('select[name=\"$name\"]').selectize({});
var selectizeControl = select[0].selectize;
selectizeControl.on('focus', function() { 
	var value = selectizeControl.getItem(selectizeControl.getValue()).text();
	selectizeControl.clear(); //remove selected item
	selectizeControl.setTextboxValue(value); //re-populate search input 
	$('input[type=select-one]').select(); 
});

This also filters the dropdown, with the options which is selected, or options which have the selected option as a part of it. For e.g. in a dropdown of Male, Female and Other, if male is already selected, it open ups the dropdown with just Male and Female.