jquery ui modal select2 bug

by Jason Crowther

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<input type="button" id="dialogButton" value="Launch">
<div id="dialog" title="Sample Dialog" style="display:none">
  <p>Below is a <b>select2</b> enhanced select box:</p>
  <select id="selectBox">
  <option>--</option>
  <option>Red</option>
  <option>Blue</option>
  <option>Yellow</option>
  <option>Orange</option>
  <option>Black</option>
  </select>
</div>

JavaScript

$( function() {
    
    // fix for select2 on jquery-ui modal dialogs
    // https://github.com/select2/select2/issues/1246
    
    if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
    	var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
    	$.ui.dialog.prototype._allowInteraction = function(e) {
        if ($(e.target).closest('.select2-dropdown').length) return true;
        return ui_dialog_interaction.apply(this, arguments);
    	};
		}
    
    $('#dialogButton').click(function(){
    	$( "#dialog" ).dialog({
    		modal: true
    	});
    });
    
    $('#selectBox').select2({
    	// if select2 isn't visible when you active it
      // it won't size correctly.  so, manually set width
      width: "82%"
    });
  } );