1

I'm developing a Laravel application, and trying to create a modal to fill a table. I've added a eventListener to a select inside the modal. When I change the value of the select and it triggers the eventListener, the console show the error below:

[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

I've tried many other ways to avoid this, but nothing worked. The code is below(don't know why, but the snippet isn't working). Can somebody wonder why this is happening?

function addFuncionalidade() {
  console.log('updated')
  const value = $("#select-funcionalidade").val()
  console.log(value)
  $('#nome-funcionalidade').val(value)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>

<div class="ui centered container">
    <button class="ui labeled icon button" onclick="$('#nova-funcionalidade').modal('show')">
        <i class="plus icon"></i>
        Acrescentar funcionalidade
    </button>
        
</div>
<div id="nova-funcionalidade" class="ui tiny modal">
    <div class="header">
        Inserir funcionalidade
    </div>
    <div class="centered scrolling content ui form">
        <div class="ui field">
            <label>Tipo</label>
            <select id="select-funcionalidade" onselect="addFuncionalidade()">
                <option value=1>Test 1</option>
                <option value=2>Test 2</option>
            </select>
        </div>
        <div class="ui field focus">
            <label>Nome</label>
            <input id="nome-funcionalidade" placeholder="Nome da funcionalidade"/>
        </div>
        <div class="ui field">
            <label>Descrição</label>
            <textarea id="descricao-funcionalidade" rows=3></textarea>
        </div>
        <div class="actions">
            <button class="ui cancel button" onclick="$('#nova-funcionalidade').modal('hide')">Fechar</button>
        </div>
    </div>
</div>
reisdev
  • 3,215
  • 2
  • 17
  • 38
  • Your [mcve] doesn't seem to reproduce the described issue. It doesn't seem to work at all. – tao Sep 23 '18 at 23:07
  • @AndreiGheorghiu, the code works, but don't know why the snippet doesn't, it doesn't show which error is occurring – reisdev Sep 23 '18 at 23:10
  • Apparently `semantic.min.css` is bugged out. Can you repro in a jsfiddle? Or perhaps try to change to a previous version of `semantic`? This error will prolly get fixed, but you don't want to wait for it, do you? – tao Sep 23 '18 at 23:12
  • This may be relevant: https://github.com/Semantic-Org/Semantic-UI/issues/6233 – Evan Trimboli Sep 23 '18 at 23:19
  • It seems to be "unsolved" =/. Anyway, thank you! – reisdev Sep 23 '18 at 23:28
  • I was dealing with similar issue, sometimes it's the 3rd party that is causing an issue. I created a package to deal with the issue: https://www.npmjs.com/package/passive-events-support Make sure to just pass ['mousewheel'] to the library instead of using default event list – Ignas Damunskis Jan 06 '22 at 08:16

0 Answers0