From 80c2ece13e9b763eb4f23f77bd846654025e2bc0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 31 Jul 2022 17:21:45 +0200
Subject: [PATCH] fix(gui-v2): chrome applying pointer events while dragging
 sortable el

---
 .../components/smartsheet/sidebar/MenuTop.vue  | 18 ++++++++++++++++++
 .../smartsheet/sidebar/RenameableMenuItem.vue  |  3 ++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 21903d1c49..e6d0c7df6a 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -31,6 +31,9 @@ const { api } = useApi()
 /** Selected view(s) for menu */
 const selected = ref<string[]>([])
 
+/** dragging renamable view items */
+let dragging = $ref(false)
+
 let deleteModalVisible = $ref(false)
 
 /** view to delete for modal */
@@ -197,3 +200,18 @@ function onDeleted() {
 
   <dlg-view-delete v-model="deleteModalVisible" :view="toDelete" @deleted="onDeleted" />
 </template>
+
+<style>
+.ghost,
+.ghost > * {
+  @apply !pointer-events-none;
+}
+
+.dragging .nc-drag-icon {
+  @apply !hidden;
+}
+
+.dragging .nc-icon:not(.nc-drag-icon) {
+  @apply !block;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index 43363dec63..2575f92717 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -137,8 +137,9 @@ function onStopEdit() {
     <div v-t="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2">
       <div class="flex w-auto">
         <MdiDrag
-          class="hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move"
+          class="nc-drag-icon hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
           :class="`nc-child-draggable-icon-${vModel.title}`"
+          @click.stop.prevent
         />
 
         <component :is="viewIcons[vModel.type].icon" class="group-hover:hidden" :class="`text-${viewIcons[vModel.type].color}`" />