Topic: Autocomplete dropdown doesn't close when lost focus

C-Contract priority asked 3 years ago


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.)

Gif of the problem

Any ideas on why this is happening or how to fix i would be great! Thank you!


Arkadiusz Idzikowski staff answered 3 years ago


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 3 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 3 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 3 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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