From a3d4db9fc1ce5297186357f564489bf5abc6ea37 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 17 Oct 2023 14:37:37 -0700
Subject: [PATCH] Fix popout menu tab indices and buttons within being
 clickable when closed (#107)

---
 lib/components/base/PopoutMenu.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

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