KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: Fixes error when dropdown button is focused (#2797)

Browse source 
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Nithin David Thomas 2021-08-13 13:40:12 +05:30 • committed by GitHub
parent 0f148f7700
commit dfcc33cbdd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

59
app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
View file

@ -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();
} }
} }
}, },