Topic: Select setValue bug
Expected behavior
setValue() should set the select value and also visually update it.
Actual behavior
setValue() sets the real dropdown value properly (can verify this in request on server). But visually it seems to revert back to initial value when selected value lower than initial value.
Also, sending a int value inside setValue() wont work at all. Although this might be intended?
Resources (screenshots, code snippets etc.)
HTML:
<select id="advertiserId" class="select">
<option value="1">Advertiser A</option>
<option value="2">Advertiser B</option>
<option value="3" selected>Advertiser C</option>
<option value="4">Advertiser C</option>
<option value="5">Advertiser D</option>
</select>
Javascript:
const advertiserId = document.getElementById('advertiserId');
const advertiserIdInstance = mdb.Select.getInstance(advertiserId);
function someHandlerOnChange()
{
const data = $('#someForm').serialize();
$.post('/url', data, function (response) {
console.log(response.advertiserId); // 2
advertiserIdInstance.setValue(response.advertiserId.toString()); // Will revert back to 3 because value 2 is lower than 3
});
}
function someHandlerOnChange()
{
const data = $('#someForm').serialize();
$.post('/url', data, function (response) {
console.log(response.advertiserId); // 4
advertiserIdInstance.setValue(response.advertiserId.toString()); // Works just fine because value 4 is higher than 3
});
}
I would not recomment using selected attribute, because as you can see it doesn't work perfectly with the Select component.
instead of that, set default value via setValue() method.
const advertiserId = document.getElementById('advertiserId');
const advertiserIdInstance = mdb.Select.getInstance(advertiserId);
advertiserIdInstance.setValue('3');
dbsgroep pro premium priority commented 2 years ago
Hello,
Sadly this is not an option.
We use ASP.NET MVC. Which basically creates a select with selected attribute based on what comes from the server. We then use the select class to create the mdb.select.
This all works fine (including the initial selected value), until we use setValue('') or jQuery val(''), which both don't work very well in another way with the mdb.select.
mlazaru staff commented 2 years ago
I see. We will take a closer look at that. Until that, check this workaround solution: https://mdbootstrap.com/snippets/standard/mlazaru/5164933#js-tab-view
As you noticed, this problem is caused by selected attribute, so I've removed this attribute and replaced it with setValue() method. It will work even if the option is default selected at the moment of creation.
dbsgroep pro premium priority commented 2 years ago
Thank you. Will look at the workaround.
root-nine pro premium priority commented 2 years ago
Would be great to have that fixed so it will support the selected attribute out of the box. We have the same scenario with ASP.NET MVC.
kpienkowska staff commented 2 years ago
We are planning to fix this soon.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No