How to Prevent Select2 Dropdown from Moving with Scroll inside a Bootstrap Vue Modal?

Question

I'm working on a project that uses Vue.js and Bootstrap-Vue. Inside a Bootstrap modal, I've integrated a Select2 dropdown. I encountered an issue where the modal wouldn't scroll when the Select2 dropdown was open. I found a partial solution on the Select2 forum (link: https://forums.select2.org/t/scrolling-prevented-on-page/1851/2) that enabled scrolling within the modal while the Select2 dropdown is open, using the following code::

    $(this.$el).on('select2:open', function (e) {
        const evt = "scroll.select2";
        $(e.target).parents().off(evt);
        $(window).off(evt);
    });

With this fix, I can now scroll the modal content with the Select2 dropdown open, which is a significant improvement. However, a new issue has arisen: as I scroll through the modal, the open Select2 dropdown moves along with the scroll, changing its intended position relative to its input field. I'm seeking a way to keep the dropdown anchored to its input field regardless of the modal's scroll position.

Here is the template:

<b-form @submit.prevent="submit">
      <b-form-group>
        <template #label>
          <fa icon="cog" class="fa-fw" /> Title
        </template>
        <b-form-group
          label="Name"
          label-for="name"
          label-align-md="right"
          label-cols-md="2"
        >
          <select2
            v-model="data.name"
            close-on-select
            :options="names"
          />
        </b-form-group>
....
</b-modal>

How can I prevent the Select2 dropdown from moving with the scroll inside a Bootstrap modal? Ideally, I'm looking for a solution that allows the dropdown to stay aligned with its corresponding input field, regardless of the modal's scroll position.