Search code examples
javascripthtmlmaterialize

Materialize CSS breaks event listener for changing selected value in dropdown list

The goal is to reset the value of a dropdown list by pressing a button. Using vanilla javascript and html the following code works fine:

HTML/JS:

button = document.getElementById('button')
button.addEventListener('click', e => {
  console.log('executed')
  document.getElementById('sel').value = 'bike'
})
<select id="sel">
  <option value="car">1</option>
  <option value="bike">2</option>
  <option value="cycle">3</option>
</select>
<button id="button">Test</button>

As expected, when the button is pressed, the value "2" is listed in the dropdown list. However, as soon as I add materialize CSS to my HTML, the value in the dropdown list is unchanged when I click the button. I know the event listener is triggered because "executed" is displayed in the console whenever I press the button. However, the value in the dropdown menu does not change like it did before in the vanilla javascript/html. How could this happen and what can I do to troubleshoot this to find the source?

HTML/JS with materialize CSS:

$(document).ready(function() {

  // Initialize materialize data picker
  $('.datepicker').datepicker({
    'format': 'yyyy-mm-dd'
  });
  $('select').formSelect();
});
button = document.getElementById('button')
button.addEventListener('click', e => {
  console.log('executed')
  document.getElementById('sel').value = 'bike'
})
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
</head>

<body>
  <select id="sel">
    <option value="car">1</option>
    <option value="bike">2</option>
    <option value="cycle">3</option>
  </select>
  <button id="button" type="button" class="bold waves-effect waves light btn-large teal lighten-2">Test</button>
</body>

</html>

Thank you to whoever provided the edit to make this executable. After playing with this a little more I noticed that after pressing the button, if you click on the dropdown menu again the value automatically changes to "2" before you even select another option.

Solution

  • You could reinitialize the plugin in your eventListener after the update of the select element.

    In addition to my code, you should outsource the initialization to a function in order to stay DRY.

    $(document).ready(function() {

  // Initialize materialize data picker
  $('.datepicker').datepicker({
    'format': 'yyyy-mm-dd'
  });
  $('select').formSelect();
});
button = document.getElementById('button')
button.addEventListener('click', e => {
  console.log('executed')
  document.getElementById('sel').value = 'bike'
 $('.datepicker').datepicker({
    'format': 'yyyy-mm-dd'
  });
  $('select').formSelect();
})
    <html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
</head>

<body>
  <select id="sel">
    <option value="car">1</option>
    <option value="bike">2</option>
    <option value="cycle">3</option>
  </select>
  <button id="button" type="button" class="bold waves-effect waves light btn-large teal lighten-2">Test</button>
</body>

</html>