fix: project options not close dropdown on click iframes

weni-ai · Dec 30, 2024 · 4b853d8 · 4b853d8
1 parent 5055220
commit 4b853d8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
@@ -76,8 +76,8 @@
         class="page-group"
       >
         <template
-          v-for="(option, index) in group"
-          :key="index"
+          v-for="option in group"
+          :key="option"
         >
           <SidebarOption
             :option="option"
@@ -112,7 +112,6 @@ export default {
 import { get } from 'lodash';
 import {
   computed,
-  getCurrentInstance,
   reactive,
   ref,
   watch,
@@ -141,7 +140,7 @@ const store = useStore();
 const route = useRoute();
 
 const props = defineProps({
-  unreadMessages: Number,
+  unreadMessages: { type: Number, default: 0 },
 });
 
 const isExpanded = ref(true);

diff --git a/src/components/Sidebar/SidebarOption.vue b/src/components/Sidebar/SidebarOption.vue
@@ -11,9 +11,11 @@
 
     <UnnnicDropdown
       v-else-if="isDropdownOption"
+      ref="optionDropdown"
       position="bottom-right"
       class="dropdown"
       :open="showChildren"
+      @update:open="showChildren = $event"
     >
       <template #trigger>
         <SidebarOptionInside
@@ -96,6 +98,8 @@ import { useRoute, useRouter } from 'vue-router';
 import SidebarOptionInside from './SidebarOptionInside.vue';
 import SidebarModal from './SidebarModal.vue';
 
+import { onClickOutside } from '@vueuse/core';
+
 const router = useRouter();
 const route = useRoute();
 
@@ -118,6 +122,16 @@ const props = defineProps({
 
 const showChildren = ref(false);
 
+const optionDropdown = ref(null);
+
+onClickOutside(
+  optionDropdown,
+  () => {
+    showChildren.value = false;
+  },
+  { detectIframe: true },
+);
+
 const childHeight = 38;
 const childSpacingNano = 4;