Problem Added non-passive event listener

Topic: Problem Added non-passive event listener

cvillagran premium asked 2 years 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 2 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 premium commented 2 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 2 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 passive flag, so I've added a task to aour bugtracker to check if there is any event of that type.

cvillagran premium commented 2 years ago

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

Add comment

Marcin Luczak staff answered 2 years ago

1 0 Best answer

<p>This really seems confusing as now I'm also experiencing weird page behavior on your snippet, but without the violation errors. </p>

<p>I've done some changes to your code that might help with its performance:</p>

<pre class="prettyprint"><code>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>

</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();
      });
    })
</code></pre>

<p>Crucial change here is adding <code>data-stop-refresh='true'</code> to the second select and clearing it't content instead of destroying it on every change. I hope this will help. </p>

Please insert min. 20 characters.

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 2 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 2 years ago

I'm happy that I could help :)

Keep coding, Marcin

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

cvillagran

Premium support 5Support score
1Questions 0Answers 1Snippets