How to solve chosen/jquery/frontend violation

Question

I am developing a component for a Joomla frontend site and when I include JHtml::_('formbehavior.chosen', 'select'); in the template form, I get this message in JavaScript Chrome Console (Mac OS X):

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

The message doesn't happen in Firefox, but I am supporting an older code for a client and beyond that message I get a really slow page load using chosen, even in Firefox.

Does anyone have an idea of how to solve this, or any alternative to chosen nowadays?

Answer 1

I don't see anything wrong with your code, but just in case it's helpful I'm using this method for including the library and I do not see your error.

use \Joomla\CMS\HTML\HTMLHelper;
use \Joomla\CMS\Factory;
use \Joomla\CMS\Uri\Uri;
use \Joomla\CMS\Router\Route;
use \Joomla\CMS\Layout\LayoutHelper;
use \Joomla\CMS\Language\Text;

HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('behavior.multiselect');
HTMLHelper::_('formbehavior.chosen', 'select');

Update:

I was curious and read a bit more about this, and it seems the error actually comes from jQuery. This Stack Overflow thread discusses in more detail and offers a few JavaScript solutions.

https://stackoverflow.com/a/48098097/1390452

Answer 2

With the contribution of @mrentropy from the page https://stackoverflow.com/a/48098097/1390452, I wrote this code to resolve the messages:

jQuery.event.special.mousewheel = {
  setup: function( _, ns, handle ){
    if ( ns.includes("noPreventDefault") ) {
      this.addEventListener("mousewheel", handle, { passive: false });
    } else {
      this.addEventListener("mousewheel", handle, { passive: true });
    }
  }
};
jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ){
    if ( ns.includes("noPreventDefault") ) {
      this.addEventListener("touchstart", handle, { passive: false });
    } else {
      this.addEventListener("touchstart", handle, { passive: true });
    }
  }
};
jQuery.event.special.touchmove = {
  setup: function( _, ns, handle ){
    if ( ns.includes("noPreventDefault") ) {
      this.addEventListener("touchmove", handle, { passive: false });
    } else {
      this.addEventListener("touchmove", handle, { passive: true });
    }
  }
};

The three events need to be rewritten as above, when using the code JHtml::_('formbehavior.chosen', 'select');.