Fix flyouts in main navigation [SCI-10208]

app/javascript/vue/shared/general_dropdown.vue

@@ -3,6 +3,7 @@
     <div ref="field" class="cursor-pointer" @click.stop="isOpen = (!isOpen || fieldOnlyOpen)">
       <slot name="field"></slot>
     </div>
+    <template v-if="isOpen">
       <teleport to="body">
         <div ref="flyout"
             class="sn-dropdown fixed z-[3000] bg-sn-white inline-block
@@ -11,11 +12,11 @@
                 'right-0': position === 'right',
                 'left-0': position === 'left',
             }"
-          v-if="isOpen"
         >
           <slot name="flyout"></slot>
         </div>
       </teleport>
+    </template>
   </div>
 </template>
 

app/javascript/vue/shared/menu_dropdown.vue

@@ -6,9 +6,9 @@
       <i v-if="caret && isOpen" class="sn-icon sn-icon-up"></i>
       <i v-else-if="caret" class="sn-icon sn-icon-down"></i>
     </button>
+    <template v-if="isOpen">
       <teleport to="body">
         <div ref="flyout"
-          v-if="isOpen"
             class="fixed z-[3000] sn-menu-dropdown bg-sn-white inline-block rounded p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]"
             :class="{
                 'right-0': position === 'right',
@@ -57,6 +57,7 @@
           </span>
         </div>
       </teleport>
+    </template>
   </div>
 </template>
 

app/javascript/vue/shared/select_dropdown.vue

@@ -46,8 +46,9 @@
       <i v-else class="sn-icon ml-auto"
                 :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen, 'text-sn-grey': disabled}"></i>
     </div>
+    <template v-if="isOpen">
       <teleport to="body">
-      <div v-if="isOpen" ref="flyout"
+        <div ref="flyout"
             class="sn-select-dropdown bg-white inline-block sn-shadow-menu-sm rounded w-full
                     fixed z-[3000]">
           <div v-if="multiple && withCheckboxes" class="p-2.5 pb-0">
@@ -84,6 +85,7 @@
           </perfect-scrollbar>
         </div>
       </teleport>
+    </template>
   </div>
 
 </template>