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.
Click events should not propagate to the document when interacting with a select element.
$(document).ready(function() {
$('.select2-example-test').select2({
placeholder: 'Select an option'
});
jQuery('.wrapper1').on('click', function(e) { //NO I18N
console.log(e)
debugger;
alert('wrapper1 Click')
});
jQuery('.wrapper2').on('click', function(e) { //NO I18N
console.log(e)
debugger;
alert('wrapper2 Click')
});
jQuery('.wrapper3').on('click', function(e) { //NO I18N
console.log(e)
debugger;
alert('wrapper3 Click')
});
jQuery(document).on('click', function(e) { //NO I18N
console.log(e)
debugger;
alert('Document Click')
});
});<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>