bug with Material Select on changing value

Topic: bug with Material Select on changing value

maskinarbeten pro premium asked 5 years ago

Expected behavior

I should be able to set the selected value of the select input using jQuery, this works fine until you manually click the select dropdown and select a value manually after that jQuery is no longer able to switch the value (not visually atleast)

Actual behavior

After manual selection from a select dropdown you can no longer set the value with jQuery this is with class mbd-select (material select) .. the default select works fine!

I upgraded from 4.8.4 to latest 4.16 and behavour broke during this upgrade, it worked fine in 4.8.4.

Resources (screenshots, code snippets etc.) This small sample will showcase the issue, if you click the button it will select option two but if u then manually select option one and try the button again it will not switch back to option two.

> <div class="container-fluid mt-2">
>     <h2>Test</h2>
>     <div class="row">
>         <button onclick="setSelect()">TEST</button>
>     </div>
>     <div class="row">
>         <div class="col-md-6 md-form">
>             <select class="mdb-select" id="editDashboardShiftInput" required>
>                 <option value="" disabled selected>Skift</option>
>                 <option value="0">Dag</option>
>                 <option value="1">Dag/Natt</option>
>             </select>
>         </div>
>     </div> </div> <script>
>     $(document).ready(function () {
>         // Material Select Initialization        
>         $('.mdb-select').materialSelect();        
>     });
> 
>     function setSelect() {
>         $('#editDashboardShiftInput').val(1);
>     } </script>
>     
>

Add comment

Mateusz Łubianka staff answered 5 years ago

0 0 Best answer

Hi @maskinarbeten,

Can you try this code?

function setSelect() {
         $('#editDashboardShiftInput').val(1);
       $('.mdb-select').materialSelect({
        destroy: true
        });
       $('.mdb-select').materialSelect();
     }

Best,

maskinarbeten pro premium commented 5 years ago

Hi, with this code if i after refresh of page first choose an option from the dropdown the subsequent changes work with the button but if i press the button first a new select dropdown appears beneath the first one so i get multiple dropdowns and only the newly created one is clickable.

Add comment

Mateusz Łubianka staff answered 5 years ago

0 0 Best answer

@maskinarbeten,

I created snippet, check function functionality: https://mdbootstrap.com/snippets/jQuery/mateusz-lubianka/1994752

Best,

maskinarbeten pro premium commented 5 years ago

Thanks changing from .mbd-select to #editDashboardShiftInput worked now it won't produce new items ..

Will this be fixed in next builds so we don't have to put this extra code in, so it works as older builds?

Mateusz Łubianka staff commented 5 years ago

I will create a task to check this case.

Best,