Material Select (MDB Pro) not retaining selection

Topic: Material Select (MDB Pro) not retaining selection

gregs_legs pro asked 4 years ago

I've just updated MDB-Pro from 4.8.7 to 4.8.10 and it seems to have broken my Material Select elements in Woocommerce forms:-

Expected behavior Select an option and the drop-down retains the selected option.

Actual behavior Select an option and the drop-down returns to 'Choose an Option'.

Resources (screenshots, code snippets etc.)

jQuery(document).ready(function($){ $('.mdb-select').materialSelect();  });

The selector is currently wrapped in the class 'mdb-select'. If I change the class to 'browser-default custom-select' I no longer get my styling but at least the selector works. Similarly, reverting to 4.8.7 fixes the issue.

What am I missing ?

gregs_legs pro commented 4 years ago

Have tested as a snippet - 4.8.9 works ok but 4.8.10 doe not work.

y2k_eclipse free commented 4 years ago

I am having a similar issue. I do have 5 dropdowns (materialSelect) that are populated on the fly.

The issue is that the last one does not get populated.
If I delete the last one then the previous one now does not get populated.
If I delete all but two then the run time population works.
I I use the "browser-default custom-select" class then all works fine.
If I hard code the options for all 5 dropdowns then all works fine.

It appears to be an issue populating the dropdowns on runtime. I use code like this to do so (which works fine with the "browser-default custom-select"):

function updateCities(cities) { try { $('#selectCity').empty();

    var option = new Option('Ciudad / Comuna', '');
    option.disabled = true;

    $('#selectCity').append(option);

    cities.forEach(function (e, i) {
        $('#selectCity').append(new Option(e.name, e.cityId));
    });
}
catch (e) {
    alert(e)
}

}

I am having a similar issue. I do have 5 dropdowns (materialSelect) that are populated on the fly.

<ol>
<li>The issue is that the last one does not get populated.</li>
<li>If I delete the last one then the previous one now does not get populated.</li>
<li>If I delete all but two then the run time population works.</li>
<li>I I use the "browser-default custom-select" class then all works fine.</li>
<li>If I hard code the options for all 5 dropdowns then all works fine.</li>
</ol>

It appears to be an issue populating the dropdowns on runtime. I use code like this to do so (which works fine with the "browser-default custom-select"):

function updateCities(cities) {
 try {
 $('#selectCity').empty();

<pre class="prettyprint"><code> var option = new Option('Ciudad / Comuna', '');
 option.disabled = true;

$('#selectCity').append(option);

cities.forEach(function (e, i) {
 $('#selectCity').append(new Option(e.name, e.cityId));
 });
}
catch (e) {
 alert(e)
}
</code></pre>

}

Please insert min. 15 characters.

MDBootstrap staff commented 4 years ago

Hi, I understand the issue. I will forward this information to the design team to fix the class interaction. Thank you all for your feedback!

gregs_legs pro commented 4 years ago

Any progress on this ?

Sebastian Kaczmarek staff commented 4 years ago

Have you tried upgrading to 4.8.11? We have fixed a lot of issues with MS

Add comment

gregs_legs pro answered 4 years ago

1 0 Best answer

Fixed with 4.8.11.
Thanks :-)

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.8.10
Device: PC
Browser: Any
OS: Windows 10
Provided sample code: No
Provided link: No

gregs_legs

Pro User 32Support score
2Questions 2Answers 0Snippets