Click events are blocked when JQuery-Select2 dropdown is open. Needs to be clicked twice to fire click event

Question

I have one dropdown and a submit button in one page. And that dropdown is implemented using JQuery-select2 version 3.5.3

Click events are blocked when JQuery-Select2 dropdown is open. So that submit button needs to be clicked twice to fire the click event.

HTML

<select id="supId" style="width:300px">
  <option value=""></option>
  <option value="1">Supplier 1</option>
  <option value="2">Supplier 2</option>
  <option value="3">Supplier 3</option>
</select>
<br><br><br><br><br><br><br><br><br>
<input type="button" value="Submit" id="submitBtn" onclick="$('#dispDiv').html('Clicked');">
<br><br>
<div id="dispDiv"></div>

Javascript

$("#supId").select2({
        placeholder: "Select Supplier",
        allowClear: true
    });

See the running example here

The dropdown keeping the focus in open and releases the focus in the first click outside the dropdown. Then click event work in the second click as usual.

This is something related to the question Mouse hover events are blocked in Stackoverflow

How to solve this problem?.

Answer 1

After spending few hours in search, got an idea from the site Going from select2 box to another requires two clicks

Adding a "click forwarder" like below into the self-destruct of the drop-mask in select2.js almost solves the problem

$(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
$(document.elementFromPoint(e.clientX,e.clientY)).trigger("focus");

The detailed edit is given below.

First find the creating the dropdown mask area (Line no: 1557 in my js). That will be like below and add the above two lines as mentioned after self.close(); .

// create the dropdown mask if doesn't already exist
mask = $("#select2-drop-mask");
if (mask.length === 0) {
    mask = $(document.createElement("div"));
    mask.attr("id","select2-drop-mask").attr("class","select2-drop-mask");
    mask.hide();
    mask.appendTo(this.body);
    mask.on("mousedown touchstart click", function (e) {
        // Prevent IE from generating a click event on the body
        reinsertElement(mask);

        var dropdown = $("#select2-drop"), self;
        if (dropdown.length > 0) {
            self=dropdown.data("select2");
            if (self.opts.selectOnBlur) {
                self.selectHighlighted({noFocus: true});
            }
            self.close();

            // The following two lines are newly added
            // Adding this to forward through the mask
            $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
            $(document.elementFromPoint(e.clientX,e.clientY)).trigger("focus");

            e.preventDefault();
            e.stopPropagation();
        }
    });
}

This somehow solved my problem.

This works beautifully between dropdown and other elements on the page, but clicking on another dropdown is not working in single click.