Como resolver violação escolhida / jquery / frontend

Question

Estou desenvolvendo um componente para um site de front-end Joomla e quando incluo JHtml::_('formbehavior.chosen', 'select');no formulário de modelo, recebo esta mensagem no Console JavaScript do Chrome (Mac OS X):

[Violação] Adicionado ouvinte de evento não passivo a um evento 'touchstart' de bloqueio de rolagem. Considere marcar o manipulador de eventos como 'passivo' para tornar a página mais responsiva. Vejohttps://www.chromestatus.com/feature/5745543795965952

A mensagem não acontece no Firefox, mas estou suportando um código mais antigo para um cliente e além dessa mensagem recebo um carregamento de página muito lento usando o escolhido, mesmo no Firefox.

Alguém tem ideia de como resolver isso, ou alguma alternativa a escolhida atualmente?

Answer 1

Não vejo nada de errado com seu código, mas para o caso de ser útil, estou usando este método para incluir a biblioteca e não vejo seu erro.

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

Atualizar:

Fiquei curioso e li um pouco mais sobre isso, e parece que o erro realmente vem do jQuery. Este thread Stack Overflow discute em mais detalhes e oferece algumas soluções JavaScript.

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

Answer 2

Com a contribuição de @mrentropy da página https://stackoverflow.com/a/48098097/1390452, Escrevi este código para resolver as mensagens:

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

Os três eventos precisam ser reescritos como acima, ao usar o código JHtml::_('formbehavior.chosen', 'select');.