search

sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.63k stars 1.34k forks source link

Vue Select doesn't work on Bootstrap Modal #1821

Open macellinoss275 opened 7 months ago

macellinoss275 commented 7 months ago

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

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: image

My mouse cannot reach the "Relish" option: image

smirnov-d commented 4 months ago

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