Is there anyway to programatically force jquery select2 dropdown to disappear when I close a dialog?

Question

I am using jquery select2 dropdown plugin on a jquery ui dialog and I keep running into any issue where i will seaerch for something then escape out of the dialog but the dropdown list stays visible after the dialog is gone.

Is there any programatic way to force that to disappear?

Answer 1

Yep. Select2 exposes a close option like so:

$('#your-select-box').select2("close");

You could run this when your dialog fires off its own close event:

$( ".selector" ).dialog({
  close: function( event, ui ) {
    $('#your-select-box').select2("close");
  }
});

or

$( ".selector" ).on( "dialogclose", function( event, ui ) {
  $('#your-select-box').select2("close");
} );