Topic: Problem Added non-passive event listener
Hi. I have the same problem that this post.
https://mdbootstrap.com/support/jquery/violation-non-passive-event-listener/
Please I need use mdb-select for my project.
Help me.
(sorry for my english).
This really seems confusing as now I'm also experiencing weird page behavior on your snippet, but without the violation errors.
I've done some changes to your code that might help with its performance:
HTML:
<div id="contenedor" class="container" style="margin-top: 1%; margin-bottom: 12%;">
<div class="col-md-10 mb-0 md-form" >
<div class="subtitulo" style="text-align: left; padding-top: 3%">PRUEBA</div>
<select class="mdb-select md-form" id="selectPrueba">
<option>Prueba 1</option>
<option>Prueba 2</option>
<option>Prueba 3</option>
</select>
</div>
<div class="col-md-10 mb-0 md-form" >
<div class="subtitulo" style="text-align: left; padding-top: 3%">ITEM</div>
<select class="mdb-select md-form" id="selectItem" data-stop-refresh='true'>
</select>
</div>
</div>
JS:
$(document).ready(function () {
var selectPrueba = $("#selectPrueba");
var selectItem = $("#selectItem");
selectPrueba.materialSelect();
selectItem.materialSelect();
selectPrueba.on('change', function(e){
//ITEM
selectItem.empty();
selectItem.append('<option value="" disabled selected>Selecciona un item</option>');
selectItem.append('<option value="1" >test 1</option>');
selectItem.append('<option value="2" >test 2</option>');
selectItem.append('<option value="3" >test 3</option>');
selectItem.materialSelect();
});
})
Crucial change here is adding data-stop-refresh='true' to the second select and clearing it't content instead of destroying it on every change. I hope this will help.
cvillagran pro premium commented 3 years ago
Hi Marcin, with data-stop-refresh='true' the problem was solved, selectItem.empty() also work for me. Thank you very much.
Marcin Luczak staff commented 3 years ago
I'm happy that I could help :)
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.19.2
- Device: pc
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: Yes
Marcin Luczak staff commented 3 years ago
Hi,
Topic you've linked is not solved as original posters never sent their code or hints to reproduce their problems.
Please create a snippet https://mdbootstrap.com/snippets/ showing your code or deploy your application on the MDB CLI https://mdbootstrap.com/docs/standard/cli/ so I can better understand what is causing your problems.
Keep coding, Marcin
cvillagran pro premium commented 3 years ago
Hi Marcin, here the problem.
https://mdbootstrap.com/snippets/jquery/cvillagran/3330937
If you change "PRUEBA" in console: [violation] Added non-passive event listener to a scroll-blocking event x 7 If you change 3 times, this display x 155 and this causing the page like hanging/halt
Thank for you aswer.
Marcin Luczak staff commented 3 years ago
Thank you for your snippet, I've checked it on a few machines and also locally in the package and unfortunately, I cannot see the problem you are describing. Your example shows no console errors for me. Would you be able to post a video showing your errors or host your application with MDB CLI so I can have exactly same setup as you have?
Non-passive event violation for the scroll may occur with 'default prevented' event causing a scroll, but without a
passiveflag, so I've added a task to aour bugtracker to check if there is any event of that type.cvillagran pro premium commented 3 years ago
Hi Marcin. Here a loom video with the problem. https://www.loom.com/share/5aff2dca3010482fb8cf5322c5a5e5da Thank you.