Permalink
Browse files

fix(button-toolbar): keynav better element visibility test

Improved element visibility testing for keynav
  • Loading branch information...
tmorehouse committed Jul 2, 2017
1 parent 6191bed commit 5c33b8e3f1e8c875d7e9b6af326cf5abf566fb6e
Showing with 12 additions and 7 deletions.
  1. +12 −7 lib/components/button-toolbar.vue
@@ -18,13 +18,18 @@
<script>
const ITEM_SELECTOR = [
'.btn:not(.disabled):not([disabled]):not([style*="display: none"]):not([style*="display:none"])',
'.form-control:not(.disabled):not([disabled]):not([style*="display: none"]):not([style*="display:none"])',
'select:not(.disabled):not([disabled]):not([style*="display: none"]):not([style*="display:none"])',
'input[type="checkbox"]:not(.disabled):not([disabled]):not([style*="display: none"]):not([style*="display:none"])',
'input[type="radio"]:not(.disabled):not([disabled]):not([style*="display: none"]):not([style*="display:none"])'
'.btn:not(.disabled):not([disabled])',
'.form-control:not(.disabled):not([disabled])',
'select:not(.disabled):not([disabled])',
'input[type="checkbox"]:not(.disabled)',
'input[type="radio"]:not(.disabled)'
].join(',');
// Determine if an HTML element is visible - Faster than CSS check
function isVisible(el) {
return el && (el.offsetWidth > 0 || el.offsetHeight > 0);
}
export default {
computed: {
classObject() {
@@ -94,12 +99,12 @@
}
},
getItems() {
const items = Array.prototype.slice.call(this.$el.querySelectorAll(ITEM_SELECTOR));
let items = Array.prototype.slice.call(this.$el.querySelectorAll(ITEM_SELECTOR));
items.forEach(item => {
// Ensure tabfocus is -1 on any new elements
item.tabIndex = -1;
});
return items;
return items.filter(el => isVisible(el));
}
},
mounted() {

0 comments on commit 5c33b8e

Please sign in to comment.