Topic: Problem Added non-passive event listener

cvillagran premium asked 1 year ago


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).


Marcin Luczak staff commented 1 year 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 premium commented 1 year 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 1 year 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 passive flag, so I've added a task to aour bugtracker to check if there is any event of that type.


cvillagran premium commented 1 year ago

Hi Marcin. Here a loom video with the problem. https://www.loom.com/share/5aff2dca3010482fb8cf5322c5a5e5da Thank you.


Marcin Luczak staff answered 1 year ago


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 premium commented 1 year 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 1 year ago

I'm happy that I could help :)

Keep coding, Marcin



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.19.2
  • Device: pc
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes