Topic: MDB Autocomplete - Close on click
Ryan Cino
priority
asked 1 month ago
Expected behavior
When an element is selected in mdb-autocomplete the dropdown hides
Actual behavior
When an element is selected in mdb-autocomplete, the dropdown remains without an ability to programatically hide. This requires a user to click outside of the dropdown to close it
Resources (screenshots, code snippets etc.)
rubyrhodes
free
answered 1 month ago
Thank you for bringing this issue to my attention! Let’s tackle the behavior of the mdb-autocomplete dropdown together.
The behavior you’re describing—where the dropdown remains open after selecting an element—is indeed a bit inconvenient for users. Fortunately, there are a couple of approaches you can try to address this:
Use the data-mdb-container Option:In your mdb-autocomplete component, consider using the data-mdb-container attribute.Set it to the selector of an element inside which the select dropdown should be rendered.For example, if your dropdown is within a modal, set data-mdb-container=".modal" (assuming the modal has the class .modal).This approach ensures that the dropdown is properly contained within the specified element and behaves as expected1.Programmatic Close on Selection:You can manually close the dropdown programmatically after an element is selected.Listen for the selection event (e.g., select or similar) and then close the dropdown using JavaScript.Here’s a simplified example (assuming you’re using jQuery):JavaScript
// Assuming you have an event listener for the 'select' event$('#RequestorSearchInput').mdb_autocomplete({ data: options}).on('select', function () { // Close the dropdown programmatically $('#RequestorSearchInput').mdb_autocomplete('close');}); my AARP Medicare
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 6.0.0
- Device: MacBook Pro
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No
Rafał Seifert staff commented 1 month ago
Could you please edit your post and provide sample showcasing how you implement your autocomplete? We couldn't recreate your problem. By saying "element is selected" do you mean that user clicks on element?