Prevent activating shortkeys when modals are active

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
This commit is contained in:
Phillip Rak 2025-02-14 11:06:32 -07:00
parent df18acc984
commit 566111496d
2 changed files with 16 additions and 2 deletions

View File

@ -35,7 +35,12 @@ export async function installPlugins(vueApp) {
vueApp.use(PortalVue);
vueApp.use(Vue3Resize);
vueApp.use(FloatingVue, floatingVueOptions);
vueApp.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });
vueApp.use(
ShortKey,
{
prevent: ['input', 'textarea', 'select'],
preventContainer: ['#modal-container-element']
});
vueApp.use(InstallCodeMirror);
vueApp.component('v-select', vSelect);
}

View File

@ -10,6 +10,7 @@ const ShortKey = {};
const mapFunctions = {};
let objAvoided = [];
let elementAvoided = [];
let containerAvoided = [];
let keyPressed = false;
const parseValue = (value) => {
@ -55,6 +56,7 @@ const unbindValue = (value, el) => {
ShortKey.install = (Vue, options) => {
elementAvoided = [...(options && options.prevent ? options.prevent : [])];
containerAvoided = [...(options && options.preventContainer ? options.preventContainer : [])];
Vue.directive('shortkey', {
beforeMount: (el, binding, vnode) => {
// Mapping the commands
@ -266,8 +268,15 @@ const mappingFunctions = ({
const availableElement = (decodedKey) => {
const objectIsAvoided = !!objAvoided.find((r) => r === document.activeElement);
const filterAvoided = !!(elementAvoided.find((selector) => document.activeElement && document.activeElement.matches(selector)));
const filterAvoidedContainer = !!(containerAvoided.find((selector) => isActiveElementChildOf(selector)));
return !!mapFunctions[decodedKey] && !(objectIsAvoided || filterAvoided);
return !!mapFunctions[decodedKey] && !(objectIsAvoided || filterAvoided) && !filterAvoidedContainer;
};
const isActiveElementChildOf = (container) => {
const activeElement = document.activeElement;
return activeElement && activeElement.closest(container) !== null;
};
export default ShortKey;