fix: Fixes error when dropdown button is focused (#2797)
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
parent
0f148f7700
commit
dfcc33cbdd
1 changed files with 32 additions and 27 deletions
|
@ -25,47 +25,52 @@ export default {
|
||||||
default: 'top',
|
default: 'top',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.focusItem();
|
this.focusItem();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
dropdownMenuButtons() {
|
||||||
|
return this.$refs.dropdownMenu.querySelectorAll(
|
||||||
|
'ul.dropdown li.dropdown-menu__item .button'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
activeElementIndex() {
|
||||||
|
const menuButtons = this.dropdownMenuButtons();
|
||||||
|
const focusedButton = this.$refs.dropdownMenu.querySelector(
|
||||||
|
'ul.dropdown li.dropdown-menu__item .button:focus'
|
||||||
|
);
|
||||||
|
const activeIndex = [...menuButtons].indexOf(focusedButton);
|
||||||
|
return activeIndex;
|
||||||
|
},
|
||||||
focusItem() {
|
focusItem() {
|
||||||
this.$refs.dropdownMenu
|
const firstButton = this.$refs.dropdownMenu.querySelector(
|
||||||
.querySelector('ul.dropdown li.dropdown-menu__item .button')
|
'ul.dropdown li.dropdown-menu__item .button'
|
||||||
.focus();
|
);
|
||||||
|
|
||||||
|
if (firstButton) firstButton.focus();
|
||||||
},
|
},
|
||||||
handleKeyEvents(e) {
|
handleKeyEvents(e) {
|
||||||
if (hasPressedArrowUpKey(e)) {
|
const menuButtons = this.dropdownMenuButtons();
|
||||||
const items = this.$refs.dropdownMenu.querySelectorAll(
|
const lastElementIndex = menuButtons.length - 1;
|
||||||
'ul.dropdown li.dropdown-menu__item .button'
|
|
||||||
);
|
|
||||||
const focusItems = this.$refs.dropdownMenu.querySelector(
|
|
||||||
'ul.dropdown li.dropdown-menu__item .button:focus'
|
|
||||||
);
|
|
||||||
const activeElementIndex = [...items].indexOf(focusItems);
|
|
||||||
const lastElementIndex = items.length - 1;
|
|
||||||
|
|
||||||
if (activeElementIndex >= 1) {
|
if (menuButtons.length === 0) return;
|
||||||
items[activeElementIndex - 1].focus();
|
|
||||||
|
if (hasPressedArrowUpKey(e)) {
|
||||||
|
const activeIndex = this.activeElementIndex();
|
||||||
|
|
||||||
|
if (activeIndex >= 1) {
|
||||||
|
menuButtons[activeIndex - 1].focus();
|
||||||
} else {
|
} else {
|
||||||
items[lastElementIndex].focus();
|
menuButtons[lastElementIndex].focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasPressedArrowDownKey(e)) {
|
if (hasPressedArrowDownKey(e)) {
|
||||||
const items = this.$refs.dropdownMenu.querySelectorAll(
|
const activeIndex = this.activeElementIndex();
|
||||||
'li.dropdown-menu__item .button'
|
|
||||||
);
|
|
||||||
const focusItems = this.$refs.dropdownMenu.querySelector(
|
|
||||||
'li.dropdown-menu__item .button:focus'
|
|
||||||
);
|
|
||||||
const activeElementIndex = [...items].indexOf(focusItems);
|
|
||||||
const lastElementIndex = items.length - 1;
|
|
||||||
|
|
||||||
if (activeElementIndex === lastElementIndex) {
|
if (activeIndex === lastElementIndex) {
|
||||||
items[0].focus();
|
menuButtons[0].focus();
|
||||||
} else {
|
} else {
|
||||||
items[activeElementIndex + 1].focus();
|
menuButtons[activeIndex + 1].focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue