Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

handle tabindex drop and select

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-06-18 16:48:49 +02:00
parent 0b6408792a
commit 2b92aca4b9
2 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
vuejs/client/src/components/Forms/Field/Combobox.vue
View file

@ -270,14 +270,27 @@ function closeScroll(e) {
select.isOpen = false;
}
// Check after a key is pressed if the current active element is the select button
// If not close the select
function closeTab(e) {
if (e.key !== "Tab" && e.key !== "Shift-Tab") return;
setTimeout(() => {
const activeEl = document.activeElement;
if (activeEl.closest("[data-select-dropdown]") !== selectDropdown.value)
return (select.isOpen = false);
}, 10);
}
// Close select dropdown when clicked outside element
watch(select, () => {
if (select.isOpen) {
window.addEventListener("click", closeOutside);
window.addEventListener("scroll", closeScroll, true);
window.addEventListener("keydown", closeTab);
} else {
window.removeEventListener("click", closeOutside);
window.removeEventListener("scroll", closeScroll, true);
window.removeEventListener("keydown", closeTab);
}
});
@ -446,6 +459,7 @@ const emits = defineEmits(["inp"]);
: '',
'select-dropdown-btn',
]"
data-select-item
:data-setting-id="props.id"
:data-setting-value="value"
:aria-controls="`${props.id}-text`"

14
vuejs/client/src/components/Forms/Field/Select.vue
View file

@ -246,14 +246,27 @@ function closeScroll(e) {
select.isOpen = false;
}
// Check after a key is pressed if the current active element is the select button
// If not close the select
function closeTab(e) {
if (e.key !== "Tab" && e.key !== "Shift-Tab") return;
setTimeout(() => {
const activeEl = document.activeElement;
if (activeEl.closest("[data-select-dropdown]") !== selectDropdown.value)
return (select.isOpen = false);
}, 10);
}
// Close select dropdown when clicked outside element
watch(select, () => {
if (select.isOpen) {
window.addEventListener("click", closeOutside);
window.addEventListener("scroll", closeScroll, true);
window.addEventListener("keydown", closeTab);
} else {
window.removeEventListener("click", closeOutside);
window.removeEventListener("scroll", closeScroll, true);
window.removeEventListener("keydown", closeTab);
}
});
@ -374,6 +387,7 @@ const emits = defineEmits(["inp"]);
: '',
'select-dropdown-btn',
]"
data-select-item
:data-setting-id="props.id"
:data-setting-value="value"
:aria-controls="`${props.id}-text`"