don't render drops

JammingBen · JammingBen · commit bd3665d53682 · 2025-11-04T07:35:56.000+01:00
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -13,10 +13,10 @@
     <slot />
   </oc-bottom-drawer>
   <div v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
-    <oc-card v-if="$slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
+    <oc-card v-if="isOpen && $slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
       <slot />
     </oc-card>
-    <slot v-else name="special" />
+    <slot v-else-if="isOpen" name="special" />
   </div>
 </template>
 
@@ -140,6 +140,7 @@ const emit = defineEmits<Emits>()
 defineSlots<Slots>()
 
 const { isMobile } = useIsMobile()
+const isOpen = ref(false)
 
 const useBottomDrawer = computed(() => unref(isMobile) && !enforceDropOnMobile)
 const bottomDrawerRef = useTemplateRef<typeof OcBottomDrawer>('bottomDrawerRef')
@@ -152,13 +153,15 @@ const show = () => {
     unref(bottomDrawerRef).show()
     return
   }
+  isOpen.value = true
   unref(tippyInstance)?.show()
 }
 const hide = () => {
   if (unref(useBottomDrawer)) {
     unref(bottomDrawerRef).hide()
     return
   }
+  isOpen.value = false
   unref(tippyInstance)?.hide()
 }
 
@@ -182,10 +185,6 @@ const onFocusOut = (event: FocusEvent) => {
   }
 }
 
-onBeforeUnmount(() => {
-  drop.value?.removeEventListener('focusout', onFocusOut)
-})
-
 const triggerMapping = computed(() => {
   return (
     {
@@ -211,6 +210,7 @@ watch(
 )
 
 onBeforeUnmount(() => {
+  unref(drop)?.removeEventListener('focusout', onFocusOut)
   destroy(unref(tippyInstance))
 })
 
@@ -236,15 +236,17 @@ const initializeTippy = () => {
     theme: 'none',
     maxWidth: 416,
     offset,
-    ...(!isNestedElement && {
-      onShow: (instance) => {
-        emit('showDrop')
+    onShow: (instance) => {
+      isOpen.value = true
+      emit('showDrop')
+      if (!isNestedElement) {
         hideAll({ exclude: instance })
-      },
-      onHide: () => {
-        emit('hideDrop')
       }
-    }),
+    },
+    onHide: () => {
+      isOpen.value = false
+      emit('hideDrop')
+    },
     popperOptions: {
       ...popperOptions,
       modifiers: [
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
@@ -114,9 +114,9 @@
             />
             <!--eslint-enable-->
           </template>
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -30,9 +30,9 @@
       @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
       @sort="sortHandler"
     >
-      <template #contextMenu="{ resource, isOpen }">
+      <template #contextMenu="{ resource }">
         <context-actions
-          v-if="isOpen && isResourceInSelection(resource)"
+          v-if="isResourceInSelection(resource)"
           :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
         />
       </template>
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
@@ -27,9 +27,9 @@
           <template #quickActions="props">
             <quick-actions class="hidden sm:block" :item="props.resource" />
           </template>
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -31,9 +31,9 @@
           @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -54,9 +54,9 @@
           @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -78,9 +78,9 @@
               @item-visible="loadPreview({ space, resource: $event })"
               @sort="handleSort"
             >
-              <template #contextMenu="{ resource, isOpen }">
+              <template #contextMenu="{ resource }">
                 <context-actions
-                  v-if="isOpen && isResourceInSelection(resource)"
+                  v-if="isResourceInSelection(resource)"
                   :action-options="{ space, resources: selectedResources }"
                 />
               </template>
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -56,9 +56,9 @@
           :view-size="viewSize"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space, resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -106,9 +106,9 @@
                 <oc-icon name="group" fill-type="line" />
               </oc-button>
             </template>
-            <template #contextMenu="{ resource, isOpen }">
+            <template #contextMenu="{ resource }">
               <space-context-actions
-                v-if="isOpen && isResourceInSelection(resource)"
+                v-if="isResourceInSelection(resource)"
                 :loading="resource.graphPermissions === undefined"
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
@@ -47,9 +47,8 @@
             @sort="handleSort"
             @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           >
-            <template #contextMenu="{ resource, isOpen }">
+            <template #contextMenu="{ resource }">
               <trash-context-actions
-                v-if="isOpen"
                 :loading="resource.graphPermissions === undefined"
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />
diff --git a/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue b/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
@@ -23,16 +23,14 @@
       mode="click"
       padding-size="small"
       close-on-click
-      @show-drop="isOpen = true"
-      @hide-drop="isOpen = false"
     >
-      <slot name="contextMenu" :item="item" :is-open="isOpen" />
+      <slot name="contextMenu" :item="item" />
     </oc-drop>
   </oc-button>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { extractDomSelector, Resource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
 
@@ -58,11 +56,9 @@ export default defineComponent({
   setup() {
     const { $gettext } = useGettext()
     const contextMenuLabel = computed(() => $gettext('Show context menu'))
-    const isOpen = ref(false)
 
     return {
-      contextMenuLabel,
-      isOpen
+      contextMenuLabel
     }
   }
 })
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -252,8 +252,8 @@
           class="resource-table-btn-action-dropdown"
           @quick-action-clicked="showContextMenuOnBtnClick($event, item)"
         >
-          <template #contextMenu="{ isOpen }">
-            <slot name="contextMenu" :resource="item" :is-open="isOpen" />
+          <template #contextMenu>
+            <slot name="contextMenu" :resource="item" />
           </template>
         </context-menu-quick-action>
       </div>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -114,8 +114,8 @@
               class="resource-tiles-btn-action-dropdown"
               @quick-action-clicked="showContextMenuOnBtnClick($event, resource, resource.id)"
             >
-              <template #contextMenu="{ isOpen }">
-                <slot name="contextMenu" :resource="resource" :is-open="isOpen" />
+              <template #contextMenu>
+                <slot name="contextMenu" :resource="resource" />
               </template>
             </context-menu-quick-action>
           </template>
@@ -235,7 +235,7 @@ const emit = defineEmits<{
 defineSlots<{
   image?: (props: { resource: Resource }) => unknown
   actions?: (props: { resource: Resource }) => unknown
-  contextMenu?: (props: { resource: Resource; isOpen: boolean }) => unknown
+  contextMenu?: (props: { resource: Resource }) => unknown
   footer?: () => unknown
   additionalResourceContent?: (props: { resource: Resource }) => unknown
 }>()
diff --git a/packages/web-pkg/src/composables/fileListHeaderPosition/useFileListHeaderPosition.ts b/packages/web-pkg/src/composables/fileListHeaderPosition/useFileListHeaderPosition.ts
@@ -15,10 +15,7 @@ export const useFileListHeaderPosition = (selector = ''): { y: Ref; refresh: ()
   }
 
   window.onresize = refresh
-  onMounted(async () => {
-    await nextTick()
-    refresh()
-  })
+  onMounted(refresh)
 
   return { y, refresh }
 }
