Selectize.js: Don't clear the text box value on blur

[CarlosLlongo]

Hi!

I'm working with the remote source select. Right now, if you write something into the input, and then click anywhere else, the input text will dissapear.

I can prevent this by modifying the onBlur function:

var deactivate = function() {
    self.close();
    //self.setTextboxValue('');

It would be nice to have an option so that the text will be preserved in the input, so that the user can click elsewhere, and later click in the input and continue typing.

[emre-dogan]

+1 It's really annoying when using selectize for remote source. User expects traditional searching behaviour.

[Freika]

+1, agree.

[eklingen88]

I just ran into the same issue and tossed together a quick plugin that should do the trick.

Just uploaded it to Github here.

All you have to do is include the JS file:

<script type="text/javascript" src=".../selectize.js/plugins/preserve_on_blur.js"></script>

And define the plugin in your constructor:

$( '#selector').selectize( {    
    ...
    plugins: [ 'preserve_on_blur' ],           
    ...
} );

[Freika]

@eklingen88 thanks, worked for me.

[panoskal]

@eklingen88 thank you for the solution. It worked for me too. But finally there is a "native" fix for this problem. You just have to add the following in your code:

$( '#selector').selectize( { ... createOnBlur: true, ... } );

[eklingen88]

@panoskal good find, i'll have to revisit this soon. thanks!

[althaus]

@panoskal This creates a new item and clears the text input, which can also be annoying, if you e.g. switch to another tab/window. It'd be great to have a clearOnBlur option or similar.

[Ruud-cb]

Thanks @eklingen88
Devs, can we have this an option by default?
Most preferred is an option similar to selectOnTab, so make it selectOnBlur which actually does the same. But if there is no match then leave the text in there.

Side question, right to the point: I just started using selectize. Why aren't all the issues cleared up? It counts 300+ issues, still on v0.x.x and 100+ outstanding PR's. Is it actively developed? Or will it lose its support soon?

[guldenmw]

I think there might be some confusion on what certain people are asking for.
selectOnBlur already exists, it will select an input on blur, given that the input is valid.
Functionality that doesn't exist yet would be to keep the text on blur without selecting or clearing it, just like a normal text field.

[eklingen88]

@wilhelmg It's been awhile since I've dealt with this issue, but as I recall and have just tested, that is what the plugin does. Whatever text is in the textbox is "preserved" when the user focuses elsewhere, even if it is not a valid input.

This behavior mimics more of a traditional textbox while still retaining the autocomplete and dropdown functionality.

[guldenmw]

@eklingen88 I was just trying to distinguish between the different requests and saying that having this built in would be great. However, the plugin definitely does the trick. Thanks for that. Exactly what I wanted.

[eklingen88]

@wilhelmg Yeah, having that as built-in functionality would be nice. As with any elephant, one bite at a time, right? lol

[matte00]

If you want mantain the search text on blur and items select try this:

/**
 * Plugin: "preserve_search" (selectize.js)
 * Based on: "preserve_on_blur" of Eric M. Klingensmith
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
Selectize.define('preserve_search', function (options) {
    var self = this;

    options.text = options.text || function (option) {
        return option[this.settings.labelField];
    };

    this.onBlur = (function (e) {
        var original = self.onBlur;

        return function (e) {
            // Capture the current input value
            var $input = this.$control_input;
            var inputValue = $input.val();

            // Do the default actions
            original.apply(this, [e]);

            // Set the value back                    
            this.setTextboxValue(inputValue);
        };
    })();

    this.onOptionSelect = (function (e) {
        var original = self.onOptionSelect;

        return function (e) {
            // Capture the current input value
            var $input = this.$control_input;
            var inputValue = $input.val();

            original.apply(this, [e]);
            this.setTextboxValue(inputValue);
            this.refreshOptions();
            if (this.currentResults.items.length <= 0) {
                this.setTextboxValue('');
                this.refreshOptions();
            }
        };
    })();
});

Then when you create you selectize set the plugin.
$('#selectizeId').selectize({plugins: ['remove_button', 'preserve_search']});

[guldenmw]

Thanks, @eklingen88's preserve_on_blur plugin mentioned above also works really well.

[RashidShamsi]

@eklingen88 With this plugin, it keeps the value in input field but not submitting it to the server.
@matte00

[Deepgmc]

If you want mantain the search text on blur and items select try this:

/**
 * Plugin: "preserve_search" (selectize.js)
 * Based on: "preserve_on_blur" of Eric M. Klingensmith
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
Selectize.define('preserve_search', function (options) {
    var self = this;

    options.text = options.text || function (option) {
        return option[this.settings.labelField];
    };

    this.onBlur = (function (e) {
        var original = self.onBlur;

        return function (e) {
            // Capture the current input value
            var $input = this.$control_input;
            var inputValue = $input.val();

            // Do the default actions
            original.apply(this, [e]);

            // Set the value back                    
            this.setTextboxValue(inputValue);
        };
    })();

    this.onOptionSelect = (function (e) {
        var original = self.onOptionSelect;

        return function (e) {
            // Capture the current input value
            var $input = this.$control_input;
            var inputValue = $input.val();

            original.apply(this, [e]);
            this.setTextboxValue(inputValue);
            this.refreshOptions();
            if (this.currentResults.items.length <= 0) {
                this.setTextboxValue('');
                this.refreshOptions();
            }
        };
    })();
});

Then when you create you selectize set the plugin.
$('#selectizeId').selectize({plugins: ['remove_button', 'preserve_search']});

Thank you very much! Helped a lot

[falky97]

I am not using the remote source select, but this worked for me:

$('select').selectize({
    ...
    onBlur: function() {
        this.setTextboxValue(this.currentResults.query);
    },
    ...

[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