Topic: Select setValue bug

dbsgroep priority asked 10 months 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
    });
}

Mateusz Lazaru staff answered 10 months ago


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 10 months 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 10 months 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 10 months ago

Thank you. Will look at the workaround.


root-nine priority commented 8 months 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 8 months ago

We are planning to fix this soon.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: 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