So, I keep getting this non-passive event listener violation for my on change event. It only started this nonsense recently. After I moved the .js file into it's own folder, this function stopped working completely. The function will not even be executed, i just get the warning instead. Every function in the .js file works except for this one.
The error:
[Violation] Added non-passive event listener to a scroll-blocking >'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
The Code:
//Put the music into the list for the user to select from
$('#songs').on('change', function() {
var $selected = $('#songs').find(':selected').text();
$('#audio').attr('src', './../music/' + $selected);
});
<div class="control-panel">
<audio src="music/Legend_of_Zelda_Zelda_Heineken_OC_ReMix.mp3"
id="audio" controls>Audio not supported</audio>
<select id="songs">
</select>
</div>
Everything I've seen about non-passive problems has to deal with functions that have .preventDefault() or modify the page based on scroll behavior. I don't know why my on change function is triggering it, so I don't know how to make it stop triggering it either.
--edit--
some more information about the nature of the bug:
It only stops the change from being transmitted to the audio element.
The warning is sent the moment the selector is clicked.
This code worked for months, the error came latter without any changes in this code preceding it.
none of my other code is being effected by the bug.
--Edit 2--
now that the code is working (by removing jQuery use) I have only one question:
why is the warning still there?
While I don't know what causes that error, it could be related to some stuff jQuery needs to do under the hood.
In general, you can do this without jQuery, so here's a rewrite in pure JS.
document.addEventListener("DOMContentLoaded", function() {
document.querySelector('#songs').addEventListener('change', function() {
var t = document.querySelector('#songs :checked').text;
document.querySelector('#audio').src = './../music/' + t;
});
});