Active Class missing from material select form

Topic: Active Class missing from material select form

developers pro asked 6 years ago

I have a select that gets created in the html of my page, with the options being populated from a DB call, then calling material_select on the select. The issue is that when those forms are populated it correctly displays the active option from the DB, but the active class is not placed on the displayed li element, preventing me from being able to target the li that's supposed to be active. if I click on the select and don't change anything then the active class is properly added, but triggering a click, mousedown, or mouseup don'est take care of the issue either. Issue

What's going on here?

Add comment

Rafał Rogulski free answered 5 years ago

0 0 Best answer

Hi, Thanks jkilbride. Your code works perfectly. We will fix this in next release. Regards

Add comment

jkilbride free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, I use server side React to create my pages. In most cases, I am pulling the data for my selects from a database and dynamically setting the selected options. On the client side, I use the normal MDB code to initialize the selects: $('.mdb-select').material_select(); However, with single (not multiple) value selects, the initially selected option is not being displayed correctly in the MDB dropdown list. So, I use the code above to add the missing classes to the correct item in the dropdown. Thanks!

Add comment

Rafał Rogulski free answered 5 years ago

0 0 Best answer

Hi Can you describe how you initialize material select? Regards

Add comment

jkilbride free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

I use the following code to find the selected value and add the active and selected classes to the matching list element when the page loads:

$('select').not('[multiple]').each(function() {
    var $this = $(this);
    var selectedFilter = ':contains("' + $this.children(':selected').text()  + '")';
    $this.siblings('ul.select-dropdown').children(selectedFilter).eq(0).addClass('active selected');
});

The multiple value selects seem to work fine. It's only the single value selects I have a problem with.

Add comment

jtangel3 pro answered 5 years ago