Bootstrap multiselect blur event not triggering

I'm trying to do some logic after user completes a selection and moves away from a bootstrap multi-select dropdown.

I tried hooking into the blur event:

      <select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: {
    includeSelectAllOption: true
  }, event: { blur: $root.onBlur}">
      </select>  

Defining a onBlur function in my viewModel:

onBlur: function(){
    alert('OnBlur');
}

But it never kicks-in. I even tried setting the event binding directly without the $root.onBlur, just blur: onBlur but didn't work.

Here is a sample JS fiddle:

https://jsfiddle.net/gtzatrL2/

Am I missing something? or is the blur event not applicable to bootstrap multi-selects?

The reason I want to hook into blur is because I have some backend logic to do through Ajax after ALL items have been selected. If I subscribe to my observableArray changes it will trigger my backend call for each item added which is not what I want.

Bootstrap is actually hiding the original select element and showing a div in its place, so the blur on the select never gets hit because it isn't being focused in the first place.

I think because the bootstrap controls are using divs it might be impossible to support blur at all because divs aren't normally focusable. There are a couple of workarounds but it might not work in this particular case. See How to blur the div element?

One option instead - you could rate-limit your observableArray so that the subscription doesn't fire immediately every time an option is selected. This will also reduce the backend calls, but it does not guarantee it won't fire before the user is finished.

http://knockoutjs.com/documentation/rateLimit-observable.html

this.selectedValues = ko.observableArray().extend({ rateLimit: { timeout: 500, method: "notifyWhenChangesStop" } });

this.selectedValues.subscribe(function() {
    alert("BLUR: " + this.selectedValues().length + " elements selected");
});

Multi-select OnBlur not working · Issue #284 · valor-software/ng2 , The OnBlur event for Multi-Select does not close the selection box. I'm trying to do some logic after user completes a selection and moves away from a bootstrap multi-select dropdown. I tried hooking into the blur event: <select id

Here's a working example -- when the user 'tabs' away to the second input the blur event callback displays how many elements were selected

var ViewModel = function() {
    this.availableValues = ko.observableArray(["Option A", "Option B", "Option C"]);
    this.selectedValues = ko.observableArray();

    this.onBlur = function() {
        alert("BLUR: " + this.selectedValues().length + " elements selected");
    }
};

ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: { includeSelectAllOption: true },event: { blur: $root.onBlur}">

<input type="text">

Issue #95 · davidstutz/bootstrap-multiselect, On a normal multi select I can use the blur function and get the values only after all the choices have been made, but it is not working when i  Hi ,When we register a custom input validator the first the user is using the form the validation not executing and we needed to add blur action and trigger the validation.but upon trying form submit with errors , then the form behave as accepted and all validation are triggered in blur event .Best,Elad.

fyi here's a response from developers github page

https://github.com/davidstutz/bootstrap-multiselect/issues/1020

basically say's that you should call onDropdownHide function wich trigger a kind of "blur" for multiselect plugin

.blur(), A function to execute each time the event is triggered. version added: 1.0.blur(). This signature does not accept any arguments. @davidstutz I am using Bootstrap 3.1.1 and doing $().dropdown('toggle') does not trigger the onDropdownHidden event. Do I need to be on 3.2? Do I need to be on 3.2? This comment has been minimized.

[Solved]-bootstrap multiselect dropdown leave focus event, This event handler is triggered when the dropdown are hidden. Both, the onDropdownShow and the onDropdownHide options are not supported  davidstutz / bootstrap-multiselect. Watch 175 Reset event #1027. Open for trigger event on each multi-select add.

Events, Listening to Select2's built-in events, and manually triggering events on the You can manually trigger events on a Select2 control using the jQuery trigger and adapters that are connected to Select2 - not through the jQuery event system​. These two events are also fired on the original element together with focus and blur which only fire when the control is considered to get or loose focus respectively. The caveat is that all these events are fired using triggerHandler and not trigger and because of this they will not bubble up the DOM tree and event delegation will not work.

trigger the onchange event of the original select when you select a , I'm using your module and it's working nicely (thanks!) trigger the onchange event of the original select when you select a jquery dropdown item change event does not trigger on $('#'+select_id).trigger("onchange"); but on  The Bootstrap multiselect with jQuery The multiselect dropdown allows the visitors of the website selecting multiple options from a dropdown in a form. Although, you may achieve that by using the multiple attribute in the <select> tag of HTML, however, instead of a dropdown, a list view type is displayed that allows users choosing multiple …

Comments
  • Bootstrap is actually hiding the original select element and showing a div in its place, so the blur on the select never gets hit. If you want to use bootstrap controls you'll probably need a custom binding to attach the event to the element bootstrap creates instead of the original select.
  • Actually I see you're already doing exactly that by using the bootstrap-multiselect project at github.com/davidstutz/bootstrap-multiselect. Unfortunately his binding handler doesn't seem to support Blur. You might petition him to add support or you could copy the handler out of that js file and try modifying it yourself to add blur event support.
  • This is working great. Thanks for the recommendation! Server is only receiving only one call now
  • The difference is this snippet doesn't use bootstrap
  • That's true -- didn't notice that there was an additional plugin being used. As Jason Spake suggested, the best approach then would be a custom binding.