In the latest version of Firefox , the document click event is triggering when a mousedown event occurs on a select element while using Select2. This behavior is different from other browsers.

[keerthivasan12]

Description:

In the latest version of Firefox, I'm encountering an unexpected behavior related to mousedown and click events when interacting with a select element within the Select2 library. The issue is not present in other web browsers.

Details:

Expected Behavior: Click events should not propagate to the document when interacting with a select element.
Observed Behavior in Firefox: Click events on the select element trigger the document click event.

Steps to Reproduce:

Use the provided HTML and JavaScript code.
Open the webpage in Firefox (Latest version).
Interact with the select element within the Select2 dropdown.

`

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.js"></script>

<script>
    $(document).ready(function () {
        $('.select2-example-test').select2({
            placeholder: 'Select an option'
        });
        jQuery('.wrapper1').on('click', function(e) {	
            console.log(e)	
            debugger;	
            alert('wrapper1 Click')
		});

        jQuery('.wrapper2').on('click', function(e) {	
            console.log(e)	
            debugger;	
            alert('wrapper2 Click')
		});

        jQuery('.wrapper3').on('click', function(e) {	
            console.log(e)	
            debugger;	
            alert('wrapper3 Click')
		});
        jQuery(document).on('click', function(e) {	
            console.log(e)	
            debugger;	
            alert('Document Click')
		});

    });
</script>

<div class="wrapper3" style="width: 300px;height: 300px;background: green;padding: 20px;">
    <div class="wrapper2" style="width: 200px;height: 200px;background: blue;padding: 20px;">
        <div class="wrapper1" style="width: 100px;height: 100px;background: red;padding: 20px;">
            <select class="select2-example-test">
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
            </select>
        </div>
    </div>
</div>

`

[siamoni]

I have the same problem after updating Firefox version to 118

[arijeetCoder]

Even I am facing the similar issue on FireFox version 118 or above. The click event on select2 field is getting propagated, reason being we are now required to handle this unexpected behaviour explicitly on different parent node. For example to handle click at document level I am forced to add additional check :

$document.on('click', clickHandler); 

function clickHandler(e){
		if($(e.currentTarget.activeElement).hasClass('select2-active')){
			return;
		}
		//other required operation on click
}

This seems to be serious issue as for other browsers behaviour is not same