fix: DatePicker toggle on tab, allow click

src/components/DatePicker/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <Popover @open="selectCurrentMonthYear">
-    <template v-slot:target="{ togglePopover }">
+    <template v-slot:target="{ togglePopover, handleBlur }">
       <input
         type="text"
         :class="inputClass"
@@ -8,7 +8,7 @@
         :placeholder="placeholder"
         readonly
         @focus="!readonly ? togglePopover() : null"
-        @blur="togglePopover(false)"
+        @blur="handleBlur"
       />
     </template>
     <template v-slot:content="{ togglePopover }">

src/components/Popover.vue

@@ -1,7 +1,11 @@
 <template>
   <div ref="reference">
     <div class="h-full">
-      <slot name="target" :togglePopover="togglePopover"></slot>
+      <slot
+        name="target"
+        :togglePopover="togglePopover"
+        :handleBlur="handleBlur"
+      ></slot>
     </div>
     <div
       ref="popover"
@@ -125,6 +129,9 @@ export default {
       this.isOpen = false;
       this.$emit('close');
     },
+    handleBlur({ relatedTarget }) {
+      relatedTarget && this.close();
+    },
   },
 };
 </script>