Material Select on modal, not closed after selected

Topic: Material Select on modal, not closed after selected

yoojs0525 pro asked 6 years ago

Hi. I am trying to put material select on modal, and did so until last version without any problem. Once a user clicked one of options in select, it was collapsed and the user could see what he or she chose. The problem is that after changing to v4.5, it is not folded after the user chooses one option. I noticed that it is working well when material select is not on modal, so I think it is related with modal, but I am not sure how to overcome this issue. I guess it might be solved by changing z-index of material select, but is it possible? Thanks. The following is the code:

<div class="select-wrapper mdb-select">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-4832ae50-5064-4be3-a118-57648cce81f4" value="Departure date">
<ul id="select-options-4832ae50-5064-4be3-a118-57648cce81f4" class="dropdown-content select-dropdown" style="width: 1380px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
<li class="disabled"><span class="filtrable">Departure date</span></li>
<li class="active selected"><span class="filtrable">Mar 17, 2018</span></li>
<li class=""><span class="filtrable">Mar 18, 2018</span></li>
<li class=""><span class="filtrable">Mar 19, 2018</span></li>
<li class=""><span class="filtrable">Mar 20, 2018</span></li>
</ul>
<select class="mdb-select initialized" id="ms_o_date">
<option disabled="true" selected="true" value="">Departure date</option>
<option value="0">Mar 17, 2018</option>
<option value="1">Mar 18, 2018</option>
<option value="2">Mar 19, 2018</option>
<option value="3">Mar 20, 2018</option>
</select>
</div>

craig@fusionreactor.co.za pro commented 6 years ago

I am experiencing the same problem. I am a little disappointed as it seems this bug has been around for some time without being addressed. I had to revert to a standard Bootstrap Select :(

yoojs0525 pro commented 6 years ago

Hope someone will solve this issue soon. I just changed to old version (v 4.4.5) as I found another error which is critical to my case, and it is working very well. :D

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

Hi there, Material select on modal is not closing, because in version 4.4.5 it was closing after clicking on scrollbar and also there was a problem on mobile devices with making it disappear. Then it was updated in version 4.5.0 as You can see and we suggest to add the 'save' button, like in the multiple select - https://mdbootstrap.com/javascript/material-select/#multiple. Unfortunately, select in modal is causing many problem, thats why we are still planning to update it. Regards

kylebehse pro commented 6 years ago

Is there a solution for this yet? It's been a while.

Mikołaj Smoleński staff commented 6 years ago

Hi there, it is critical issue for us and we're currently working on solutions.

Yutaka priority commented 6 years ago

I am interested in solution too, please update.

Mikołaj Smoleński staff commented 6 years ago

Material Select currently enters the decisive phase. We will update the whole component soon. We're basing on all remarks from our support

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: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

yoojs0525

Pro User 2Support score
4Questions 0Answers 0Snippets