Topic: Autocomplete dropdown doesn't close when lost focus
Expected behavior
Using an autocomplete outline version input, a user types into the input and gets search results in a dropdown. The user clicks off the autocomplete to defocus it and expects the dropdown to close.
Actual behavior
The problem only manifests in the autocomplete when the user types in something, clicks outside the autocomplete, then specifically selects the text they typed into the autocomplete using the mouse, and types to overwrite what was there. Clicking off the autocomplete to remove focus, the dropdown does not close until the user clicks back into the autocomplete.
Resources (screenshots, code snippets etc.)
Any ideas on why this is happening or how to fix i would be great! Thank you!
Thank you for letting us know about this bug. We managed to reproduce the unexpected behavior on our end, but we still need to find the cause of the problem.
As a workaround for now, you can try to manually hide the dropdown after blur event:
<div class="md-form" (blur)="auto.hide()">
<input
type="text"
class="completer-input form-control mdb-autocomplete"
[ngModel]="searchText | async"
(ngModelChange)="searchText.next($event)"
[mdbAutoCompleter]="auto"
placeholder="Choose your color"
#input
/>
<mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
<mdb-option *ngFor="let option of results | async" [value]="option">
{{ option }}
</mdb-option>
</mdb-auto-completer>
</div>
C-Contract priority commented 4 years ago
Awesome, I will try that workaround!
Just so you know our tester also found if you add a lot of text to the field and use the keyboard "home" button it will also keep the dropdown open when it loses focus sometimes.
Arkadiusz Idzikowski staff commented 4 years ago
It may be due to the same error, but if you can, please add a slightly more detailed description of the second bug, it will be of great help in finding the source of the problem.
C-Contract priority commented 4 years ago
The second bug manifests in the autocomplete when the user types in something long, clicks outside the autocomplete, then clicks back inside the autocomplete and hits the keyboard "home" button to return them to the front of the long text. Then when clicking off the autocomplete to remove focus, the dropdown does not close until the user clicks back into the autocomplete and selects a dropdown option.
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: 9.4.0
- Device: Desktop
- Browser: chrome
- OS: Window 10
- Provided sample code: No
- Provided link: Yes