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?

6
  • Welcome to JSE. Please take the tour while you wait for support. Sep 1, 2020 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, 2020 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 Sep 2, 2020 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. Sep 2, 2020 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, 2020 at 14:56

2 Answers 2

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

3
  • I do that, same response. Sep 2, 2020 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. Sep 7, 2020 at 22:34
  • That's terrific, Bruno! Way to go on resolving the mystery.
    – mrentropy
    Sep 8, 2020 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');.

1
  • Please be sure to accept your answer so that the system understands that this page is resolved. Thank you. Sep 15, 2020 at 4:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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