feat: click outside of drawer should close drawer

Services/client/src/components/FileItemAction.vue

@@ -1,35 +1,56 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 defineEmits(['edit', 'delete'])
 
-const props = 
-  defineProps<{
-    nameId: string
-
-  }>()
-
+const props = defineProps<{
+  nameId: string
+}>()
 
+const open = ref(false)
 </script>
 
 <template>
-  <q-btn @click.stop icon="more_vert" color="grey" flat dense :data-testid="`action${props.nameId}`">
-    <q-menu auto-close>
+  <q-btn
+    @click.stop
+    icon="more_vert"
+    color="grey"
+    flat
+    dense
+    :data-testid="`action${props.nameId}`"
+  >
+    <q-menu v-model="open">
       <q-list dense>
-        <q-item clickable @click="() => $emit('edit')" id="FileltemActionEdit">
+        <q-item
+          clickable
+          id="FileltemActionEdit"
+          @click.stop="
+            () => {
+              open = false
+              $emit('edit')
+            }
+          "
+        >
           <q-item-section>
             <div class="row items-center white">
               <q-icon name="o_edit" color="positive" />
-              <span class="q-ml-sm ">แก้ไข</span>
+              <span class="q-ml-sm">แก้ไข</span>
             </div>
           </q-item-section>
         </q-item>
         <q-item
           clickable
-          @click="() => $emit('delete')"
+          @click.stop="
+            () => {
+              open = false
+              $emit('delete')
+            }
+          "
           id="FileltemActiondelete"
         >
           <q-item-section>
             <div class="row items-center white">
-              <q-icon  name="mdi-trash-can-outline" color="negative" />
+              <q-icon name="mdi-trash-can-outline" color="negative" />
               <span class="q-ml-sm">ลบ</span>
             </div>
           </q-item-section>