Topic: Autocomplete in sidebar

williamw priority asked 3 years ago


Bug Solved With WorkAround

*Expected behavior*When copying the code from https://mdbootstrap.com/docs/standard/forms/autocomplete/ asynchronous search. I would expect the search box to return the autocomplete-dropdown options wherever the search box is placed.

*Actual behavior*The searchbox dropdown correctly returns and displays the example star wars characters if the box is in the page or in the navbar, but when the search box is placed within a slim Sidenav, no dropdown is produced.

Resources (screenshots, code snippets etc.)

Whilst data is returned, as seen in console.logs, the dropdown is either not triggered or is hidden behind. I have tried adjusting the z-index, but this doesn't seem to make a difference.

I do notice when I expand the slim sidebar and inspect the console the autocomplete-dropdown-container is automatically created with this

 <div class="autocomplete-dropdown-container" id="autocomplete-dropdown-600957" style="width: 0px; position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(120px, 406px);" data-popper-placement="bottom">
   <div class="autocomplete-dropdown open">
     <ul class="autocomplete-items-list" role="listbox" style="max-height: 190px;">
       <li data-mdb-index="0" role="option" class="autocomplete-item">Darth Vader</li>
       <li data-mdb-index="1" role="option" class="autocomplete-item">Biggs Darklighter</li> 
       <li data-mdb-index="2" role="option" class="autocomplete-item">Darth Maul</li>
     </ul>
   </div>
</div>

I have found that by adding

.autocomplete-dropdown-container {
  width: 200px !important;
}

Within the styles at the top of the page, this issue is prevented.

It would be great if this could be fixed at source : )

Thanks!


Grzegorz Bujański staff commented 3 years ago

look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2859354#html-tab-view Autocomplete added correctly and is visible. Can you send your snippet in which you will see the problem you are having?


jakarn priority commented 3 years ago

The same issue occurs when using an autocomplete within a collapse: https://mdbootstrap.com/snippets/standard/jakarn/2864201?view=side


williamw priority commented 3 years ago

Hey @Grzegorz Bujański,

Thanks for the snippet, I have altered it slightly to illustrate the issue.

https://mdbootstrap.com/snippets/standard/williamw/2864439

This occurs when the autocomplete search box is in one of the non-top-level list items. In your example I swapped out 'link 4' with the autocomplete search box. This should now be replicable : )

Thanks @jakarn for confirming!


umch777 free answered 3 years ago


Thanks @Grzegorz , I had similar issues and above solution solved my problem.


Grzegorz Bujański staff answered 3 years ago


@williamw @jakarn
Autocomplete computes the width during initialization. In this case, autocomplete is invisible during initialization. Therefore width = 0. But there is a simple workaround for this. Only the selector that you have to use in your snippets will change.

@williamw:

const collapse = document.querySelector('#sidenav-collapse-2-0-1');

@jakarn:

const collapse = document.querySelector('#collapsable');

The rest of the code will be common in both cases:

collapse.addEventListener('shown.bs.collapse' () => {
  new mdb.Autocomplete(displayValueAutocomplete, {
    filter: dataFilter,
    displayValue: (value) => value.title,
  });
});


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 Standard
  • MDB Version: 3.0.0
  • Device: Custom Build
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes