Disabling keypress action on primary button loading state

src/components/button/Primary.vue

@@ -26,6 +26,7 @@
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
     role="button"
+    @keydown="handleKeypress"
   >
     <span
       class="inline-flex items-center justify-center whitespace-nowrap"
@@ -85,7 +86,7 @@ interface Props {
   shortcut?: string[]
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   to: "",
   exact: true,
   blank: false,
@@ -103,4 +104,11 @@ withDefaults(defineProps<Props>(), {
   outline: false,
   shortcut: () => [],
 })
-</script>
+
+const handleKeypress = (event: KeyboardEvent) => {
+  // Check if the button is in a loading state
+  if (props.loading && (event.key === "Enter" || event.key === " ")){
+    event.preventDefault();
+  }
+};
+</script>

src/stories/Button.story.vue

@@ -11,4 +11,4 @@
 
 <script setup lang="ts">
 import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
-</script>
+</script>

src/stories/Keypress.story.vue

@@ -0,0 +1,70 @@
+<template>
+    <Story title="Button">
+      <Variant title="Primary">
+        <HoppButtonPrimary 
+          ref="primaryButton"
+          label="Button" 
+          @click="handleClick('Primary button clicked')" 
+        />
+      </Variant>
+      <Variant title="Secondary">
+        <HoppButtonSecondary 
+          label="Button" 
+          :loading="isLoading"
+          @click="handleClick('Secondary button clicked')" 
+        />
+      </Variant>
+    </Story>
+  </template>
+
+  <script setup lang="ts">
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
+
+  const primaryButton = ref<InstanceType<typeof HoppButtonPrimary> | null>(null);
+  const isLoading = ref(false);
+
+  // Function to handle click event, log message, and trigger an Enter keypress event
+  function handleClick(message: string) {
+    console.log(message)
+
+      // Set loading state to true
+    isLoading.value = true;
+
+    // Simulate loading by resetting the loading state after 3 seconds
+    setTimeout(() => {
+    isLoading.value = false;
+  }, 3000); // 3 seconds delay
+  }
+
+  function handleKeyPress(event: KeyboardEvent) {
+
+    const enterEvent = new KeyboardEvent('keydown', {
+      key: ' ',
+      code: ' ',
+      keyCode: 32, 
+      charCode: 32,
+      which: 32,
+      bubbles: true, 
+    });
+
+    // Dispatch the Enter keypress event on the HoppButtonPrimary element
+    if (primaryButton.value) {
+      primaryButton.value.$el.dispatchEvent(enterEvent); // Trigger the event on the button
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        handleKeyPress(event);
+      }
+    });
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('keydown', handleKeyPress)
+  })
+
+  </script>
+