Prevent empty state

[Pradeek]

How do I configure this to select the first value when the user types something thats not a valid choice. At the moment, it seems to clear the text but there is no event to catch and set the first option as the value.

[mehrdd]

+1 for this.

[zanedev]

yeah this would be cool

[brianreavis]

PR's for this welcome! This would be a great precursor for #379

[thorsten-mueller]

I would welcome that too. Though I found a way to handle this issue for now by adding an blur event handler on the input element like this:

$('.selectize-control').find('input').on('blur', function(){
  var selected_customer = $select[0].selectize.getValue();
  if(selected_customer === ''){
    $select[0].selectize.setValue(current_customer);
  }
});

It's a bit primitive, since I need to handle things from the outside. Being able to set a default item (as I have stored in current_customer) would be great.

Also in the onChange event I set current_customer to the selected item (if any). So it stays up to date with my last selection.

In addition it would be nice if we had an option to automatically blur the focus when something is selected (so for example on iPads the onscreen display gets closed).

[jlil]

+1

[dtuite]

+1. Would love this feature.

[macpham]

+1

[dingsdax]

👍
also an option to switch back to the previous value on the select field, if an empty state was given and the element looses focus, because the user has forgotten to click or press tab or enter...

[w00fz]

Am I the only one seeing this as an actual bug?
In single mode with the allowEmptyOption disabled the behavior should be reflecting a standard <select> and in a standard select you always have to have an option selected. Instead here you can end up with empty value which is definitely not desired.

To reproduce, click on the dropdown, hit backspace and click away. The textbox field is empty and so is the value, meaning that technically the allowEmptyOption serves no purpose and worst is that in a form it can be submit as empty which shouldn't be possible.

I personally think the expected behavior should be to fallback to the first available option, this would work for both states of allowEmptyOption.

I fixed this by adding in the close method, right before the triggering of the dropdown_close event:

if (this.options.mode === 'single' && !this.getValue()) {
    this.lastQuery = null;
    this.setTextboxValue('');
    this.addItem(this.Options[Object.keys(this.Options)[0]][this.options.valueField]);
}

This will also require an additional change in the addItem, so that the close method won't get called again if the value matches:

if (inputMode === 'single' && self.isOpen) self.close();

Please keep in mind this is just a workaround and it should be properly fixed.

[issafram]

@w00fz I also have this issue and it is a major hassle for me. I am not sure how you fixed it since it looks like a good amount of code, but I have resorted to checking if there is valid input constantly in my application instead of just being able to assume that there is a selection. It is annoying to say the least.

[morrow95]

New user and also facing the same problem. Single select and I want to allow users to select from an ajax results list, BUT, I always want there to be a value no matter what. Same as mentioned above, all you need to do is hit backspace then click out of the dropdown and there is an empty value while I want it to be the 'default' selected value I have listed static in my html.

@w00fz Can you elaborate on your fix mentioned above?

In the meantime I have done something like this which does what I want, but requires you to save your default value in js so you have it available.

var default_value = $("#selectize").val(); //store the value of your default selection already listed in html
...
onDropdownClose:function() {
    if(this.getValue() == '') {
        this.setValue(default_value);
    }
},

[bettysteger]

maybe related to this: #838

[Gabb1995]

Another simple fix

    $(".selectize").each(function() {
        var select = $(this).selectize(
            //your options
        );
        var selectize = select[0].selectize;
        selectize.on('blur', function() {
            if (selectize.getValue() === '') {
                var defaultOption = selectize.options[Object.keys(selectize.options)[0]];
                selectize.setValue(defaultOption.value);
            }
        });
    });

`

[Eisa01]

Similar to @morrow95,
However, instead of setting and grabbing a default value,
an approach that feels native would be restoring the value that was selected.

This immediately reverts to the previously selected item (if its empty or the typed input is wrong)

         ...
        //When opening dropdown get the value
        onDropdownOpen:function() {
          value = this.getValue()
        },
        //When closing empty dropdown, set the grabbed value
        onDropdownClose:function() {
          if(this.getValue() == '') {
            this.setValue(value);
          }
        }

Another method
In this you can continue typing wrong values but once you click outside (if empty or wrong it will revert).

         ...
        //When opening dropdown get the value
        onDropdownOpen:function() {
          value = this.getValue()
        },
        //When closing empty dropdown, set the grabbed value
        onBlur:function() {
          if(this.getValue() == '') {
            this.setValue(value);
          }
        },

Both methods work, this should fix the issue.