Autocomplete Dropdown Does Not Disappear When Clicking Outside in a Modal

[cychen117]

Hello,

I am using the bootstrap5-autocomplete plugin in a Bootstrap 5 modal. I have noticed an issue where the autocomplete dropdown does not disappear when I click outside of it. The input and the autocomplete dropdown are inside a modal.

Expected Behavior: When I click outside of the autocomplete dropdown, I expect the dropdown to disappear. Actual Behavior: The dropdown does not disappear when I click outside of it. Additional Information: If the input field and the autocomplete dropdown are not inside a modal, the dropdown disappears as expected when clicking outside of it.

Could you please help me understand if this is a known issue or if there is a workaround for this? Any help would be greatly appreciated. Thank you!

Here is the relevant code:

HTML:

<div class="modal fade" data-bs-backdrop="static" id="customModal2" tabindex="-1" aria-labelledby="customModalLabel2" aria-hidden="true">
    <!-- Modal content -->
    <div><input id="customCode" name="customCode" type="text" class="form-control"></div>
</div>

JavaScript:

let auto_complete = new Autocomplete(document.getElementById('customCode'), {
    items: ['AR001', 'AR002', 'AR003', 'AR004', 'AR005'],
    maximumItems: 10,
    highlightTyped: true,
    highlightClass: 'fw-bold text-primary',
    fixed: true,
});

[lekoala]

you are right i had to do something to allow clicking the scrollbar when a list is too long, but that has an unfortunate side effect i have the solution here https://github.com/lekoala/bootstrap5-autocomplete/releases/tag/1.1.27 it's been published you can give it a try

[cychen117]

It works, thank you very much.