From 442a7168b695ea392d181c8f3af225753c2e7d55 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Tue, 26 Sep 2023 13:40:51 +0800
Subject: [PATCH] Issue #93: Done.

---
 src/components/durationjs.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index bbdaf1b..e6b020e 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="relative">
-  <div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect" id="timeButton">
+  <div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect" :id="size">
     <div v-if="totalSeconds === 0" class="text-center">
       <p>0</p>
     </div>
@@ -11,8 +11,7 @@
       <p>{{ seconds }}s</p>
     </div>
   </div>
-  <!-- v-closable="onClose" -->
-  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="onClose">
+  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="{id: size, handler: onClose}">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
@@ -336,11 +335,11 @@ export default {
       mounted(el, {value}) {
         let handleOutsideClick = function(e) {
           let target = e.target;
-          while (target && target.id !== 'timeButton') {
+          while (target && target.id !== value.id) {
             target = target.parentElement;
           };
-          const isClickOutside = target?.id !== 'timeButton' && !el.contains(e.target)
-          if (isClickOutside) value();
+          const isClickOutside = target?.id !== value.id && !el.contains(e.target)
+          if (isClickOutside) value.handler();
           e.stopPropagation();
         }
         document.addEventListener('click', handleOutsideClick);
@@ -348,7 +347,6 @@ export default {
           document.removeEventListener('click', handleOutsideClick);
         };
       },
-
     }
   },