update

learningequality · Dec 9, 2024 · 91a0991 · 91a0991
1 parent dfd3b60
commit 91a0991
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
@@ -9,7 +9,7 @@
     :disabled="disabled"
     tabindex="0"
     :aria-haspopup="hasMenuSlot ? 'menu' : undefined"
-    :aria-expanded="hasMenuSlot ? String(isExpanded) : undefined"
+    :aria-expanded="hasMenuSlot ? String(isMenuExpanded) : undefined"
     @click="handleClick"
     @keyup.enter.stop.prevent="handlePressEnter"
     @mouseenter="hovering = true"
@@ -116,7 +116,7 @@
     data() {
       return {
         hovering: false,
-        isExpanded: false,
+        isMenuExpanded: false,
       };
     },
     computed: {
@@ -162,11 +162,17 @@
         return !!this.$slots.menu;
       },
     },
+    mounted() {
+      document.addEventListener('click', this.handleClickOutside);
+    },
+    beforeDestroy() {
+      document.removeEventListener('click', this.handleClickOutside);
+    },
     methods: {
       handleClick(event) {
         this.blurWhenClicked();
         if (this.hasMenuSlot) {
-          this.isExpanded = !this.isExpanded;
+          this.isMenuExpanded = !this.isMenuExpanded;
         }
         /**
          * Emitted when the button is triggered
@@ -189,12 +195,10 @@
           this.$el.blur();
         }
       },
-      /**
-       * @public
-       * Set the expanded state of the button
-       */
-      setExpanded(expanded) {
-        this.isExpanded = expanded;
+      handleClickOutside(event) {
+        if (!this.$refs.button.contains(event.target)) {
+          this.isMenuExpanded = false;
+        }
       },
     },
   };

diff --git a/lib/buttons-and-links/KIconButton.vue b/lib/buttons-and-links/KIconButton.vue
@@ -22,7 +22,9 @@
     <!-- UiIconButton used flexbox - 7px is the magic centering number -->
     <KIcon :icon="icon" :color="color" :style="iconStyles" />
     <!-- @slot Pass sub-components into the button, typically `KDropdownMenu` -->
-    <slot name="menu"></slot>
+    <template #menu>
+      <slot name="menu"></slot>
+    </template>
   </KButton>
 
 </template>