1

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?

  • Welcome to JSE. Please take the tour while you wait for support. – mickmackusa Sep 1 '20 at 4:09
  • Even though jQuery Chosen is a deprecated/not maintained plugin it is not giving console error on its demo page, so I was not able to duplicate the issue you are writing about. You can check it here: harvesthq.github.io/chosen – Zollie Sep 1 '20 at 19:07
  • Hi @Zollie this error is in Joomla supplied version of chosen, but if you use Chrome (v. 85) for Mac OS X (v 10.15.6) the demo page also show message about violation – Brunno Prego Sep 2 '20 at 11:30
  • I figured out how to see the message in the development console on windows: On the console, there is a message filter, on windows the verbose message type is not active by default. Activating this level the messages appear in windows as well. – Brunno Prego Sep 2 '20 at 12:26
  • I use Chrome (v.85) and I see now that Joomla indeed is supplying an older Version 1.6.2 of JQuery/Chosen and the last version of that is 1.8.7. The test page of Chosen uses an older jQuery library too, however I still cannot get the console error. I mean I've seen the error but it came from the old jQuery library in the first place not from the Chosen script. I think alternatively you can try Select2 library, I have not checked that deeper yet but it does not look bad either. select2.org – Zollie Sep 2 '20 at 14:56
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

  • I do that, same response. – Brunno Prego Sep 2 '20 at 11:22
  • Hi @mrentropy, I checked out your suggestion, and get an solution based in some response there: 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 }); } } }; I needed to do this to _mousewheel, touchstart and touchmove events. – Brunno Prego Sep 7 '20 at 22:34
  • That's terrific, Bruno! Way to go on resolving the mystery. – mrentropy Sep 8 '20 at 17:04
1

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

  • Please be sure to accept your answer so that the system understands that this page is resolved. Thank you. – mickmackusa Sep 15 '20 at 4:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.