Problem with select multiple with filter inside modal.

Topic: Problem with select multiple with filter inside modal.

gdw96 free asked 3 years ago

Hello,

I have a problem with multiple Select with modal window search.

I explain, in my page, I have two modal windows. One for authentication and one for registration. In my registration modal window, I have two select with filter except that the search only works under very particular conditions.

But first of all, a bit of context (everything I make say is important), I have a home page with a navbar that has a logo and 3 links on the left (one of which is soberly named "Registration" for the registration modal window) and a link on the right named "Access to your account" (for the login modal window).

In my page, I have a "Register for free" button that opens the registration modal window.

In my login modal window, I have a link "Not registered yet? Register" that closes the login modal window to open the registration modal window.

In my registration modal window, I have a link "Already have an account? Login" link that closes the registration modal window to open the login modal window.

As I said in the registration modal window, I have a form with two select with filter. It is impossible to write anything in the "Search" field of the select except in a very special case :

For the search to work, I have to click on the right link of the navbar ("Access to your account"), and then, via this modal window, click on "Not yet registered? Register". And there, and only there, I can filter my select.

It's not enough to go through the connection modal window for it to work, you have to go through the link on the right of the navbar. But beware, if this right link opens directly the registration modal window, it doesn't work! It's weird, isn't it?

By any other means it doesn't work, even managing the opening of the modal manually in JavaScript or making the select in JavaScript.

So what happens when I click on the right link of the navbar ("Access to your account")? This happens: Uncaught TypeError: 'querySelector' called on an object that does not implement interface Element.

When I have this error, it's works.

I really need a solution.... Got an idea?

Thanks a lot,

PS: Oh yes and I would like in the first select no value to be selected by default (I didn't pass) and in the second I would like a specific value to be selected by default (I only passed via JavaScript, impossible via HTML attributes).

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

2 0 Best answer

<p>Hello,</p>

<p>Please use <code>data-mdb-container=".modal"</code> on the select component. After that, you should be able to focus the search input. In this case, select dropdown needs to be appended to the modal, that contains this specific select component. If you use more than one modal on the page, please make sure to use unique selector (<code>#exampleModal</code> in this case). For example:</p>

<select
     class="select"
     data-mdb-container="#exampleModal"
     data-mdb-filter="true"
 >
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
</code></pre>

<p>We will update the documentation page and add a more detailed description of the problem and solution with <code>container</code> selector.</p>

<p>Our select works the same as native HTML select. In order to remove the default selected value, you would need to add a hidden option with empty value:</p>

<pre class="prettyprint"><code> <select
     class="select"
     data-mdb-container="#exampleModal"
     data-mdb-filter="true"
 >
   <option value="" hidden></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
</code></pre>

<p>To select default option in HTML template, use <code>selected</code> attribute like in native select:</p>

<pre class="prettyprint"><code> <select
     class="select"
     data-mdb-container="#exampleModal"
     data-mdb-filter="true"
 >
   <option value="1">One</option>
   <option value="2" selected>Two</option>
   <option value="3">Three</option>
 </select>
</code></pre>

Please insert min. 20 characters.

Hello,

Please use data-mdb-container=".modal" on the select component. After that, you should be able to focus the search input. In this case, select dropdown needs to be appended to the modal, that contains this specific select component. If you use more than one modal on the page, please make sure to use unique selector (#exampleModal in this case). For example:

<div
   class="modal fade"
   id="exampleModal"
   tabindex="-1"
   aria-labelledby="exampleModalLabel"
    aria-hidden="true"
 >...</div>

 <select
     class="select"
     data-mdb-container="#exampleModal"
     data-mdb-filter="true"
 >
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>

We will update the documentation page and add a more detailed description of the problem and solution with container selector.

Our select works the same as native HTML select. In order to remove the default selected value, you would need to add a hidden option with empty value:

 <select
     class="select"
     data-mdb-container="#exampleModal"
     data-mdb-filter="true"
 >
   <option value="" hidden></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>

To select default option in HTML template, use selected attribute like in native select:

 <select
     class="select"
     data-mdb-container="#exampleModal"
     data-mdb-filter="true"
 >
   <option value="1">One</option>
   <option value="2" selected>Two</option>
   <option value="3">Three</option>
 </select>

gdw96 free commented 3 years ago

@Arkadiusz Idzikowski I had already tried this and myselect didn't work anymore.

But, anyway, by upgrading MDB5 to 3.1.0 version it finally works.

Thank you very much,

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: Free
Premium support: No
Technology: MDB Standard
MDB Version: 3.0.0
Device: Any
Browser: Any
OS: Any
Provided sample code: Yes
Provided link: No

gdw96

85Support score
10Questions 3Answers 3Snippets