Permalink
Browse files

fix(dropdowns): Change how dropdown items are highlighted (#717)

* fix(dropdown): Change hover/focus style

* fix(nav-item-dropdown): Change focus/hover styling

* fix(dropdown mixin): Change how highlight is shown
  • Loading branch information...
tmorehouse committed Jul 21, 2017
1 parent 8da4dd8 commit a02270ef2d27b21c419b5e8a9906fce2d884d7cc
Showing with 19 additions and 31 deletions.
  1. +9 −1 lib/components/dropdown.vue
  2. +9 −1 lib/components/nav-item-dropdown.vue
  3. +0 −28 lib/mixins/dropdown.js
  4. +1 −1 lib/mixins/listen-on-root.js
@@ -36,14 +36,22 @@
@keydown.tab="onTab"
@keydown.up="focusNext($event,true)"
@keydown.down="focusNext($event,false)"
@mouseover="focusHovered($event)"
>
<slot></slot>
</div>
</div>
</template>
<style scoped>
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-header:focus {
background-color: #eaeaea;
outline: none;
}
</style>
<script>
import { dropdownMixin } from '../mixins';
import bButton from './button.vue';
@@ -23,14 +23,22 @@
@keydown.tab="onTab"
@keydown.up="focusNext($event,true)"
@keydown.down="focusNext($event,false)"
@mouseover="focusHovered($event)"
>
<slot></slot>
</div>
</li>
</template>
<style scoped>
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-header:focus {
background-color: #eaeaea;
outline: none;
}
</style>
<script>
import { dropdownMixin } from '../mixins';
@@ -123,8 +123,6 @@ export default {
this.visible = !this.visible;
if (this.visible) {
this.$nextTick(function () {
// Clear any items that may have active state left
this.clearItems();
// Focus first visible non-disabled item
const item = this.getFirstItem();
if (item) {
@@ -180,39 +178,13 @@ export default {
this.focusItem(index, items);
});
},
focusHovered(e) {
if (!this.visible) {
return;
}
this.$nextTick(() => {
const items = this.getItems();
if (items.length < 1) {
return;
}
const index = items.indexOf(e.target);
if (index > -1) {
e.preventDefault();
e.stopPropagation();
this.focusItem(index, items);
}
});
},
focusItem(idx, items) {
items.forEach((el, i) => {
if (i === idx) {
el.classList.add('active');
el.focus();
} else {
el.classList.remove('active');
}
});
},
clearItems() {
const items = this.getItems();
items.forEach(el => {
el.classList.remove('active');
});
},
getItems() {
// Get all items and headers
return filterVisible(arrayFrom(this.$refs.menu.querySelectorAll(ALL_SELECTOR)));
@@ -1,4 +1,4 @@
import { isArray } from "../utils/array"
import { isArray } from '../utils/array';
/**
* Issue #569: collapse::toggle::state triggered too many times
* @link https://github.com/bootstrap-vue/bootstrap-vue/issues/569

0 comments on commit a02270e

Please sign in to comment.