t.find(...).filter(...).sort is not a function in findFocusable($element) (foundation.util.keyboard.js)

[JPustkuchen]

Context

findFocusable() implements a chain of jQuery methods. Sadly it does not care for the case, that the chain returns null, so that .sort can't be called on it.

This happens, if no item in $element.find() matches the given conditions.

t.find(...).filter(...).sort is not a function

// Functions pulled out to be referenceable from internals
function findFocusable($element) {
  if(!$element) {return false; }
  return $element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function() {
    if (!$(this).is(':visible') || $(this).attr('tabindex') < 0) { return false; } //only have visible elements and those that have a tabindex greater or equal 0
    return true;
  })
  .sort( function( a, b ) {
    if ($(a).attr('tabindex') === $(b).attr('tabindex')) {
      return 0;
    }
    let aTabIndex = parseInt($(a).attr('tabindex'), 10),
      bTabIndex = parseInt($(b).attr('tabindex'), 10);
    // Undefined is treated the same as 0
    if (typeof $(a).attr('tabindex') === 'undefined' && bTabIndex > 0) {
      return 1;
    }
    if (typeof $(b).attr('tabindex') === 'undefined' && aTabIndex > 0) {
      return -1;
    }
    if (aTabIndex === 0 && bTabIndex > 0) {
      return 1;
    }
    if (bTabIndex === 0 && aTabIndex > 0) {
      return -1;
    }
    if (aTabIndex < bTabIndex) {
      return -1;
    }
    if (aTabIndex > bTabIndex) {
      return 1;
    }
  });
}

(foundation.util.keyboard.js)

What should happen?

.sort() should not be called on null

...

What happens instead?

.sort() is called on null
...

Possible Solution

Add an empty check before calling .sort() on the result of find().filter().

...

Test Case and/or Steps to Reproduce (for bugs)

Test Case:

How to reproduce:
1.
2.
3.

Context

...

Your Environment

• Foundation version(s) used:
• Browser(s) name and version(s):
• Device, Operating System and version:
• Link to your project:

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.

[Jesmaster]

I had this error happen after updating to jQuery 4. jQuery 4 overrides the find and filter functions to return objects instead of arrays which causes the sort function call to fail. Downgrading to jQuery 3 fixes the issue.

[ca-dsgn]

I have the same issue while using jQuery 4.0.

[rossb89]

hacky-but-legit-workaround:

You can use patch-package to locally patch the file in question to fix the issue.

Example: in an older Drupal site we have, we have just upgraded to Drupal 11 which comes with jQuery 4.x as an optional dependency and we are using foundation sites 6.8.x on it. We had an issue with the reveal plugin which calls the findFocusable() method from foundation.util.keyboard.js.

In our project we were just referencing the whole minified foundation.min.js rather than separate packages, so to make life easier I switched to using the non minified version, made the changes to foundation.js to fix the issue, and used npx patch-package to generate a local patch to fix the issue.

Newer versions on Drupal handle compression when JS aggregation is enabled using peast so the actual filesize difference won't be much (perhaps 5-10%) using non minified against minified.

Sample patch (with the required code changes) I generated here:

diff --git a/node_modules/foundation-sites/dist/js/foundation.js b/node_modules/foundation-sites/dist/js/foundation.js
index 8370974..b3328ed 100644
--- a/node_modules/foundation-sites/dist/js/foundation.js
+++ b/node_modules/foundation-sites/dist/js/foundation.js
@@ -11127,7 +11127,9 @@ function findFocusable($element) {
       return false;
     } //only have visible elements and those that have a tabindex greater or equal 0
     return true;
-  }).sort(function (a, b) {
+  })
+  .get()
+  .sort(function (a, b) {
     if (jquery__WEBPACK_IMPORTED_MODULE_0___default()(a).attr('tabindex') === jquery__WEBPACK_IMPORTED_MODULE_0___default()(b).attr('tabindex')) {
       return 0;
     }
@@ -11242,7 +11244,8 @@ var Keyboard = {
    * @param  {jQuery} $element  jQuery object to trap the foucs into.
    */
   trapFocus: function trapFocus($element) {
-    var $focusable = findFocusable($element),
+    var focusables = findFocusable($element),
+      $focusable = jquery__WEBPACK_IMPORTED_MODULE_0___default()(focusables),
       $firstFocusable = $focusable.eq(0),
       $lastFocusable = $focusable.eq(-1);
     $element.on('keydown.zf.trapfocus', function (event) {

Obviously if you are including the JS modules separately you'd have to patch the separate file where those functions are defined, etc etc. Bit hacky but it gets the job done if anyone is a bit stuck!