Cómo resolver la violación elegida / jquery / frontend

Question

Estoy desarrollando un componente para un sitio de interfaz de Joomla y cuando lo incluyo JHtml::_('formbehavior.chosen', 'select');en el formulario de plantilla, recibo este mensaje en la Consola JavaScript de Chrome (Mac OS X):

[Violación] Se agregó un detector de eventos no pasivo a un evento "touchstart" que bloquea el desplazamiento. Considere marcar el controlador de eventos como "pasivo" para que la página sea más receptiva. Verhttps://www.chromestatus.com/feature/5745543795965952

El mensaje no ocurre en Firefox, pero estoy apoyando un código más antiguo para un cliente y más allá de ese mensaje obtengo una carga de página muy lenta usando elegido, incluso en Firefox.

¿Alguien tiene idea de cómo solucionar esto, o alguna alternativa a la elegida hoy en día?

Answer 1

No veo nada malo en su código, pero en caso de que sea útil, estoy usando este método para incluir la biblioteca y no veo su 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');

Actualizar:

Tenía curiosidad y leí un poco más sobre esto, y parece que el error en realidad proviene de jQuery. Este hilo de Stack Overflow analiza con más detalle y ofrece algunas soluciones de JavaScript.

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

Answer 2

Con el aporte de @mrentropy desde la página https://stackoverflow.com/a/48098097/1390452, Escribí este código para resolver los mensajes:

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 });
    }
  }
};

Los tres eventos deben reescribirse como se indicó anteriormente, cuando se usa el código JHtml::_('formbehavior.chosen', 'select');.