Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix popout menu tab indices and buttons within being clickable when closed (#107)

Browse Source
This commit is contained in:
Prospector 2023-10-17 14:37:37 -07:00 committed by GitHub
parent 8369330053
commit a3d4db9fc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/components/base/PopoutMenu.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<div ref="dropdown" class="popup-container" tabindex="0" :aria-expanded="dropdownVisible"> <div ref="dropdown" class="popup-container" tabindex="-1" :aria-expanded="dropdownVisible">
<button <button
v-bind="$attrs" v-bind="$attrs"
ref="dropdownButton" ref="dropdownButton"
:class="{ 'popout-open': dropdownVisible }" :class="{ 'popout-open': dropdownVisible }"
tabindex="-1"
@click="toggleDropdown" @click="toggleDropdown"
> >
<slot></slot> <slot></slot>
@ -145,10 +146,19 @@ onBeforeUnmount(() => {
left: calc(100% + var(--gap-sm) - 1rem); left: calc(100% + var(--gap-sm) - 1rem);
} }
&:not(.visible):not(:focus-within) {
pointer-events: none;
*,
::before,
::after {
pointer-events: none;
}
}
&.visible, &.visible,
&:focus-within { &:focus-within {
opacity: 1; opacity: 1;
pointer-events: unset;
scale: 1; scale: 1;
&.position-bottom-left { &.position-bottom-left {