Update KButton.vue

learningequality · Dec 11, 2024 · 421a745 · 421a745
1 parent 560e951
commit 421a745
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
@@ -149,6 +149,7 @@
         this.lastFocusElement = document.activeElement;
         this.$nextTick(() => this.$nextTick(() => this.setFocus()));
         window.addEventListener('keydown', this.handleOpenMenuNavigation, true);
+        this.$parent.isMenuExpanded = true;
       },
       setFocus() {
         this.$refs.menu.$el.querySelector('li').focus();
@@ -166,7 +167,7 @@
             this.lastFocusElement.focus();
           }
         }
-
+        this.$parent.isMenuExpanded = false;
         window.removeEventListener('keyup', this.handleKeyUp, true);
       },
       getNextFocusableSibling(focusedElement) {

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: {
@@ -166,7 +166,7 @@
       handleClick(event) {
         this.blurWhenClicked();
         if (this.hasMenuSlot) {
-          this.isExpanded = !this.isExpanded;
+          this.isMenuExpanded = !this.isMenuExpanded;
         }
         /**
          * Emitted when the button is triggered
@@ -189,9 +189,6 @@
           this.$el.blur();
         }
       },
-      setExpanded(expanded) {
-        this.isExpanded = expanded;
-      },
     },
   };
 

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>