mokhosh/filament-kanban

[Bug]: Mobile click not working

albertobenavides opened this issue · 3 comments

albertobenavides commented

What happened?

On mobile (Android, not tested on iPhone), the draggable attribute prevent records to be clicked, also preventing the edit modal to appear.

How to reproduce the bug

Click records in Kanban while in mobile.

Package Version

Lastest

PHP Version

8.2

Laravel Version

11

Which operating systems does with happen with?

No response

Which browsers does with happen with?

Chrome

Notes

No response

mokhosh commented

Yes, sortablejs is preventing the click event to go through on mobile for some reason.

I'm not using this on mobile since kanban boards don't make much sense on mobile to begin with, but if you need to have it on mobile there is an easy fix:

  1. Publish the views. Keep the script view. If you want to change this for all your kanban boards keep the record view as well, otherwise customize the record view per kanban board.

  2. Choose a section of your record as your drag "handle":

<div class="handle">
    <span>{{ $record->nickname }}</span>
</div>
  1. Use this handle in your script:
  statuses.forEach(status => Sortable.create(document.querySelector(`[data-status-id='${status}']`), {
    handle: '.handle',
    // ...
mokhosh commented

Here are some related issues and PRs for reference. You can also find some alternative solutions if you dig into them, like setting a delay.

SortableJS/Sortable#2312

SortableJS/Sortable#441

SortableJS/Sortable#411

SortableJS/Sortable#2136

  • 👍1
albertobenavides commented

Hello, I have found the solution by using SortableJS, Thank you very much. Adding this in resources\views\vendor\filament-kanban\kanban-scripts.blade.php worked for me:

delayOnTouchOnly: true,
delay : 100,
  • 🎉1