fix(files): Do not add drag and drop listeners when renaming a file

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index e8d8d00d36566c07d8fbe6d6da432eb0fd2792f4..b89c5dcb3f437532501f5bafefd8abfb8a6c9e42 100644 (file)
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -27,12 +27,7 @@
                :data-cy-files-list-row-name="source.basename"
                :draggable="canDrag"
                class="files-list__row"
-               @contextmenu="onRightClick"
-               @dragover="onDragOver"
-               @dragleave="onDragLeave"
-               @dragstart="onDragStart"
-               @dragend="onDragEnd"
-               @drop="onDrop">
+               v-on="rowListeners">
                <!-- Failed indicator -->
                <span v-if="source.attributes.failed" class="files-list__row--failed" />
 
@@ -110,7 +105,7 @@ import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { vOnClickOutside } from '@vueuse/components'
 import moment from '@nextcloud/moment'
-import Vue from 'vue'
+import Vue, { defineComponent } from 'vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
 import { getDragAndDropPreview } from '../utils/dragUtils.ts'
@@ -132,7 +127,7 @@ import logger from '../logger.js'
 
 Vue.directive('onClickOutside', vOnClickOutside)
 
-export default Vue.extend({
+export default defineComponent({
        name: 'FileEntry',
 
        components: {
@@ -194,6 +189,26 @@ export default Vue.extend({
        },
 
        computed: {
+               /**
+                * Conditionally add drag and drop listeners
+                * Do not add drag start and over listeners on renaming to allow to drag and drop text
+                */
+               rowListeners() {
+                       const conditionals = this.isRenaming
+                               ? {}
+                               : {
+                                       dragstart: this.onDragStart,
+                                       dragover: this.onDragOver,
+                               }
+
+                       return {
+                               ...conditionals,
+                               contextmenu: this.onRightClick,
+                               dragleave: this.onDragLeave,
+                               dragend: this.onDragEnd,
+                               drop: this.onDrop,
+                       }
+               },
                currentView(): View {
                        return this.$navigation.active as View
                },
@@ -303,6 +318,10 @@ export default Vue.extend({
                },
 
                canDrag() {
+                       if (this.isRenaming) {
+                               return false
+                       }
+
                        const canDrag = (node: Node): boolean => {
                                return (node?.permissions & Permission.UPDATE) !== 0
                        }
@@ -449,7 +468,12 @@ export default Vue.extend({
                        logger.debug('Drag ended')
                },
 
-               async onDrop(event) {
+               async onDrop(event: DragEvent) {
+                       // skip if native drop like text drag and drop from files names
+                       if (!this.draggingFiles && !event.dataTransfer?.files?.length) {
+                               return
+                       }
+
                        event.preventDefault()
                        event.stopPropagation()
 

diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index 3848b3bb73d18adeec52ba5f5b421e7ff7300548..6f31727fbc29666e708475079b85bd9b0bf5ce6f 100644 (file)
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -55,13 +55,15 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue'
+
 import { emit } from '@nextcloud/event-bus'
 import { FileType, NodeStatus, Permission } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import axios from '@nextcloud/axios'
-import Vue, { PropType } from 'vue'
+import Vue from 'vue'
 
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'