Vue Select doesn't work on Bootstrap Modal

[macellinoss275]

Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.

• Vue Version: ^3.4.19
• Vue Select Version: 4.0.0-beta.6

Describe the bug
I'm using the latest version of both Bootstrap 5 and Vue Select. My Select is on a modal and not a new page. The problem is not only the overlay is weird, but the option outside it can't be clicked.

Steps To Reproduce
Here is my code for the select:

                                <div class="mb-3">
                                    <label class="form-label" for="employment_type">Employment Type</label>
                                    <vSelect placeholder="Select Type" :options="['Mustard', 'Ketchup', 'Relish']" />
                                </div>

Expected behavior
I think the problem here is there is no background to contain the option while the Bootstrap Select comes with a background box that will overlay successfully.

Screenshots
Here is the problem:

My mouse cannot reach the "Relish" option:

[smirnov-d]

Hello, @macellinoss275. Maybe an "append-to-body" prop can solve this issue