diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 06a271ef83..4504d61e09 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -9,6 +9,7 @@ import { getjQuery, getElementFromSelector, isElement, + isVisible, makeArray, noop, typeCheckConfig @@ -478,6 +479,7 @@ class Dropdown { } const items = makeArray(SelectorEngine.find(Selector.VISIBLE_ITEMS, parent)) + .filter(isVisible) if (!items.length) { return diff --git a/js/src/util/index.js b/js/src/util/index.js index 150b4f8773..8a5ae21566 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -138,9 +138,12 @@ const isVisible = element => { } if (element.style && element.parentNode && element.parentNode.style) { - return element.style.display !== 'none' && - element.parentNode.style.display !== 'none' && - element.style.visibility !== 'hidden' + const elementStyle = getComputedStyle(element) + const parentNodeStyle = getComputedStyle(element.parentNode) + + return elementStyle.display !== 'none' && + parentNodeStyle.display !== 'none' && + elementStyle.visibility !== 'hidden' } return false diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 0046cf6809..7491e38c0d 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1292,6 +1292,43 @@ describe('Dropdown', () => { triggerDropdown.click() }) + it('should skip hidden element when using keyboard navigation', done => { + fixtureEl.innerHTML = [ + '', + '