Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBSelect/Autocomplete list remains on screen

WoMe free asked 4 years ago


Expected behavior Leaving the selectable lists with TAB, one enters the next control in the tab-order and the list should disappear.

Actual behavior The list remains on the screen.


Grzegorz Bujański staff commented 4 years ago

Hi.

Thanks for report this. I added it to our to-do list.

Best, Grzegorz


jlt free answered 4 years ago


FWIW. Ran into a similar issue whereby I was querying a database on every autocomplete keyup event to refresh the data list. Discovered that every call to mdbAutocomplete added another DOM UL, plus discovered a need to perform a blur and focus on the autocomplete field in order to trigger the drop down list to show. The code I settled on...

  const autoCompleteId = $( 'autoCompleteId' );
  autoCompleteId.keyup( event => {

    let result = SQL.select( ... // SQL select based on autoCompleteId.val()

    // Remove the old drop downs.
    autoCompleteId.siblings('ul').remove();

    // Generate the new list.
    autoCompleteId.mdbAutocomplete({
      data: result.map( row => row.lastName ),
      visibleOptions: 7
    });

    // Trigger autocomplete to show the drop down.
    autoCompleteId.blur();
    autoCompleteId.focus();
  } );

It took some time to figure this out through trial and error, so hope this helps someone else.


Grzegorz Bujański staff commented 4 years ago

Hi. I can't reproduce this bug. Please create a snippet in which it will appear. I'll check it.



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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.12.0
  • Device: x64
  • Browser: FF, Chrome
  • OS: Win
  • Provided sample code: No
  • Provided link: No