From 21253869f38aedc3853e8f5a8fbd9deb71124522 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 11 Sep 2024 17:49:19 +0200
Subject: [PATCH] Fix click.stop not working on interactive elements

rendered within the card via its slots.
---
 lib/KCard/index.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
index a0ad11561..a7d08d819 100644
--- a/lib/KCard/index.vue
+++ b/lib/KCard/index.vue
@@ -1,6 +1,10 @@
 <template>
 
   <!-- see trackInputModality  for [data-focus=true] -->
+  <!--
+    do not use @onmouseup but rather @click
+    to allow for @click.stop on buttons and similar
+    rendered within a card via its slots -->
   <li
     tabindex="0"
     data-focus="true"
@@ -8,7 +12,7 @@
     @focus="onFocus"
     @mouseenter="onHover"
     @mousedown="onMouseDown"
-    @mouseup="onMouseUp"
+    @click="onClick"
     @keyup.enter="onEnter"
   >
     <div
@@ -28,7 +32,7 @@
           This is because <li> is supposed to take care of it.
           Furthemore, together with 'draggable' disabled, it ensures
           that text selection works on the title text.
-          See the custom click implementation in 'onMouseUp'. 
+          See the custom click implementation in 'onClick'. 
         -->
         <router-link
           tabindex="-1"
@@ -371,6 +375,7 @@
       },
     },
     mounted() {
+      console.log('TEST');
       if (!this.$slots.title && !this.title) {
         console.error(`[KCard] provide title via 'title' slot or prop`);
       }
@@ -391,7 +396,7 @@
       onMouseDown() {
         this.mouseDownTime = new Date().getTime();
       },
-      onMouseUp() {
+      onClick() {
         const mouseUpTime = new Date().getTime();
         // Make textual content selectable within the whole clickable card area.
         //