wire:sortable callback has no effect in custom page

Hi guys, I created a custom Filament page. Inside, I have the following content :

<x-filament::page>
    <ul wire:sortable="updateTaskOrder">
        @foreach ($items as $task)
            <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                <h4 wire:sortable.handle>{{ $task->title }}</h4>
                <button wire:click="removeTask({{ $task->id }})">Remove</button>
            </li>
        @endforeach
    </ul>
</x-filament::page>

<x-filament::page>
    <ul wire:sortable="updateTaskOrder">
        @foreach ($items as $task)
            <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                <h4 wire:sortable.handle>{{ $task->title }}</h4>
                <button wire:click="removeTask({{ $task->id }})">Remove</button>
            </li>
        @endforeach
    </ul>
</x-filament::page>

However, the callback method passed to wire:sortable is NEVER called. I do not know why. Is it a problem with Filament livewire component?

6 Replies

Dennis Koch•12mo ago

Can you share the code of the Filament page?

JibayMcs•12mo ago

<ul wire:sortable="$updateTaskOrder()"> ? <ul wire:sortable="$wire.updateTaskOrder()"> ?

Tritus•12mo ago

None of these works :/ Yes of course :

class Planning extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.projects.planning';

    protected static ?string $title = 'Custom Page Title';

    public ?Project $project;

    public $items = [];

    protected static function shouldRegisterNavigation(): bool
    {
        return false;
    }

    public function mount(Project $project)
    {
        $this->project = $project;
        $project->load('items');
        self::$title = 'Edit planning for project ' . $project->name;
        $this->items = $project->items()->orderBy('order')->get();
    }

}

class Planning extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.projects.planning';

    protected static ?string $title = 'Custom Page Title';

    public ?Project $project;

    public $items = [];

    protected static function shouldRegisterNavigation(): bool
    {
        return false;
    }

    public function mount(Project $project)
    {
        $this->project = $project;
        $project->load('items');
        self::$title = 'Edit planning for project ' . $project->name;
        $this->items = $project->items()->orderBy('order')->get();
    }

}

Dennis Koch•12mo ago

And where is updateTaskOrder() 🤔

Tritus•12mo ago

Whether present or not, the result is the same. I have no error, no debug displayed, nothing :/ I finally came up with a solution after look at the code table.blade.php from filament package :

<ul wire:sortable wire:end.stop="updateTaskOrder($event.target.sortable.toArray())">

<ul wire:sortable wire:end.stop="updateTaskOrder($event.target.sortable.toArray())">

It's not as easy to use as the callback from wire:sortable, but it's the best solution I found

tesse05•7mo ago

any update? same issue

Gaming

Programming

wire:sortable callback has no effect in custom page