foundation / foundation/yeti

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

Open
#15,533 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
29.8k
Forks
5.4k
Avg merge
25m
Merged PRs (30d)
1

Description

## 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.

Contributor guide

Open the contributing guide

Research direction

Read foundation.util.keyboard.js and inspect findFocusable(), especially the find/filter chain when no elements match. Confirm the fix by exercising an element with no focusable descendants and verify it returns without calling sort or throwing.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.