Autocomplete in sidebar

Topic: Autocomplete in sidebar

williamw pro premium priority asked 4 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 4 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 pro premium priority commented 4 years ago

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

williamw pro premium priority commented 4 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!

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

@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,
  });
});

Add comment

umch777 answered 4 years ago