Select setValue bug

Topic: Select setValue bug

dbsgroep priority asked 1 year ago

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
    });
}

Add comment

Mateusz Lazaru staff answered 1 year ago

1 0 Best answer

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 priority commented 1 year 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.

Mateusz Lazaru staff commented 1 year 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 priority commented 1 year ago

Thank you. Will look at the workaround.

root-nine priority commented 1 year 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.

Kamila Pieńkowska staff commented 1 year ago

We are planning to fix this soon.

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: MDB5 6.2.0
Device: Desktop
Browser: Chrome
OS: Windows 11
Provided sample code: No
Provided link: No

dbsgroep

0Support score
7Questions 0Answers 2Snippets