Console warnings for non-passive scroll event hand

Question

I'm getting this console error when I use Form Select from bootstrap-vue. I'm using google chrome.

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

I'm getting this data from a api, using axios. See the code below.

<b-form-select v-model="selected" class="mb-3">
    <option :value="null">Select a group</option>
    <option v-for="group in groupItem" :value="group.id">
        {{group.name}}
    </option>
</b-form-select>

Answer 1

It's related to the new event listener options, more here and here

There is a new options object that can be passed to the addEventListener. The passive event listeners on the page should be passed the { passive: true } option to improve scroll performance.

document.addEventListener('touchstart', handler, { passive: true });

The warning is only a performance recommendation, not really a major concern or issue, although performance improvements are always good.

An issue has already been reported at the bootstrap-vue repository. You can fix it by either submitting a pull request, or waiting for someone else to do it.