Materialize Select Dropdown menu not resizing when updating the list through Javascript

[benSmith1981]

Wheen I update the dropdown list I get thsi:

One list is meant to update another list through Javascript by doing this: const students = data.success; console.log(students); // now you can access the students list here // and update the options in the select element as needed console.log(students) const studentsSelect = document.getElementById("students"); studentsSelect.innerHTML = ""; for (const student of students) { const option = document.createElement("option"); option.value = student.id; option.text = student.name; studentsSelect.add(option); } let student_list = document.getElementById('students');

If I turn off Materialize styling the list will get updated properly as expected. However, with materialize on the list is always cut off and the options don't appear. I have no idea how to fix this, it should just work like any other dropdown list and expand if you update it in javascript.

Your Environment

• Version used: materialize 1.0.0/css/materialize.min.css
• Browser Name and version: EDGE Version 109.0.1518.78 (Official build) (64-bit) and CHrome Version 109.0.5414.120 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Windows 10

[benSmith1981]

OH apparently calling this $('select').formSelect(); refreshes the dropdown so the added options appear now and everything sizes correctly, but how would anyone know they needed to do that?

[Jerit3787]

Hi, this project is no longer maintained! The community-managed fork is still being maintained. Please open an issue there instead. Thanks! https://www.github.com/materializecss/materialize