AJAX on mobile not selecting touched item

Asked over at SO, on mobile with AJAX the item above what's touched is incorrectly selected. Not shown in mobile emulators.

Minimal example, note how removing ajax: {url: 'ajax/example',dataType: 'json',} from $(document).ready(function() stops the issue:

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.1.1/dist/select2-bootstrap-5-theme.min.css" />
</head>

<select class="form-select" id="custom-select" >
  <option>Christmas Island</option>
                <option>South Sudan</option>
                <option>Kenya</option>
                <option>French Guiana</option>
</select>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {$('#custom-select').select2({
    theme: "bootstrap-5",
    ajax: {url: 'ajax/example',dataType: 'json',    }
    });});
</script>
</body>
</html>

How can we fix this?

apalfrey / select2-bootstrap-5-theme

AJAX on mobile not selecting touched item #47