Select2 dropdown not appearing in correct place - html

Question

I have a select2 multiselect embedded inside a modal, but when I click on the select2 container to make the dropdown appear for the options, the dropdown doesn't appear where it should - rather it is half way up the page. When I zoom out of the page, it appears in the correct place, but zooming back in returns it to the wrong place.
What is the cause of this and what would be the best way to rectify it?
Normal View
Zoomed Out
Some things that I've already tried as suggested by other questions and answers:
Removed tabindex="-1" from the modal
Added style="overflow:hidden;" to <div class="modal-body">
Added dropdownParent to attach the dropdown to the modal dialog, rather than the HTML body
Attempted to change the z value in CSS
Edit
I have the following script on my page to fire the select2 container. This one its own causes the dropdown to function correctly.
document.addEventListener("DOMContentLoaded", function() {
// Select2
$("#hazards").each(function() {
$(this)
.wrap("<div class=\"position-relative\"></div>")
.select2({
placeholder: "Select hazards or search by typing above",
dropdownParent: $(this).parent()
});
});
});
I also have another script that when my select2 changes, pushes results to a different multiselect. The start of the code is this:
window.addEventListener('DOMContentLoaded', () => {
$('#hazards').select2();
let hprops = document.getElementById('hp_codes')
// document.querySelector('#hazards').addEventListener('change', e => {
// The hazards addEventListener was not firing?
$('#hazards').on('change', e => {
let options = e.target.options;
let hazards = [];
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].selected) {
hazards.push(options[i].value);
}
}
... then if hazards results is XXXX push YYYY
When the second code is commented out and just the first, everything works but the results aren't pushed to my second multiselect. When the first is commented out and the second is left alone, it doesn't work as intended with the dropdown displaying out of position. So it looks like a js conflict.
How would I combine the first into the second whilst maintaining the function of the second script?

Answer 1

In the second script the Select2 plugin is re-initiazed with no other options:
$('#hazards').select2();
The correct code should be:
window.addEventListener('DOMContentLoaded', () => {
// Select2
$("#hazards").each(function() {
$(this)
.wrap("<div class=\"position-relative\"></div>")
.select2({
placeholder: "Select hazards or search by typing above",
dropdownParent: $(this).parent()
});
});
let hprops = document.getElementById('hp_codes')
// document.querySelector('#hazards').addEventListener('change', e => {
// The hazards addEventListener was not firing?
$('#hazards').on('change', e => {
let options = e.target.options;
let hazards = [];
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].selected) {
hazards.push(options[i].value);
}
}
... then if hazards results is XXXX push YYYY