File icons stays on screen, after drag drop event

[jb-alvarado]

Hello,
I try to implement a file drag&drop function. But as you see in the screen recording, the file icons stay visible on my screen, after the event is released:

2024-11-04.16-42-16.mp4

(the other icons comes from previous tests).

My system is: Fedora 41 with wayland and I use Tauri 2.

My test code is:

<script setup lang="ts">
import { ref } from 'vue'
import { listen } from '@tauri-apps/api/event'

const filenameList = ref([] as string[])

listen('tauri://drag-drop', (event: any) => {
    for (const path of event.payload.paths) {
        filenameList.value.push(path)
    }

    console.log(event);
})

function filename(path: string): string {
    const match = path.match(/[^\\/]+$/)
    return match ? match[0] : ''
}
</script>

<template>
    <div class="flex flex-col h-screen justify-between select-none cursor-default">
        <header class="bg-base-100 w-full">
            <div class="menu menu-vertical md:menu-horizontal rounded-box m-0 p-0">
                <details class="dropdown h-7">
                    <summary class="btn-sm active:bg-base-200 py-1 px-2 cursor-pointer">File</summary>
                    <ul class="menu dropdown-content bg-base-100 rounded-sm z-[1] w-52 shadow m-0 p-0">
                        <li><a class="hover:rounded-sm">Item 1</a></li>
                        <li><a class="hover:rounded-sm">Item 2</a></li>
                    </ul>
                </details>
            </div>
        </header>
        <main class="mb-auto bg-base-300 w-full h-full">
            <div class="bg-base-200 h-full p-1 overflow-x-auto">
                <table class="bg-base-300 rounded-sm border-collapse table table-zebra table-auto">
                    <thead>
                        <tr>
                            <th>File</th>
                            <th>Artist</th>
                            <th>Year</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="file in filenameList" key="file">
                            <td>{{ filename(file) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>
        <footer class="h-32 grid grid-cols-2 bg-blue-500">
            <div>left</div>
            <div>right</div>
        </footer>
    </div>
</template>

Is there a way to fix this issue?

[FabianLars]

This issue is tracked in #11282 and #11343. We're not exactly sure what causes it or how to fix it.

[jb-alvarado]

Thanks for your answer and links to the tracked issues, I didn't find them before. I remember seeing this issue in another app, long ago, under X11, so I'm not sure if this is really related to wayland.

ChatGPT says, that this can happen when the event is not finalised, but I'm not sure if this is true.