Autocomplete in sidebar

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!

Please insert min. 15 characters.

Add comment

umch777 free answered 3 years ago

0 0 Best answer

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

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

<a href="/profile/?id=166910" target="_blank" rel="nofollow">@williamw</a> <a href="/profile/?id=155057" target="_blank" rel="nofollow">@jakarn</a> 
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.

<a href="/profile/?id=166910" target="_blank" rel="nofollow">@williamw</a>:

<pre class="prettyprint"><code>const collapse = document.querySelector('#sidenav-collapse-2-0-1');
</code></pre>

<a href="/profile/?id=155057" target="_blank" rel="nofollow">@jakarn</a>:

<pre class="prettyprint"><code>const collapse = document.querySelector('#collapsable');
</code></pre>

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

<pre class="prettyprint"><code>collapse.addEventListener('shown.bs.collapse' () => {
 new mdb.Autocomplete(displayValueAutocomplete, {
 filter: dataFilter,
 displayValue: (value) => value.title,
 });
});
</code></pre>

Please insert min. 20 characters.

@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

Write

Create snippet

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

williamw

37Support score
7Questions 0Answers 3Snippets