F
Filament•2mo ago
JibayMcs

Custom live field not updated in a custom action

Hi everyone ! Today I'm facing an issue with two custom objects, an Action and a Field. The problem is while I'm interacting with the search input (a live entangled property) I need to update a list of items in realtime, but the method afterStateUpdated(function (TasksList $component, $state) { ... }); is never called. I clearly see the update endpoint called in real-time like the screenshot joined, but my dd($state) in the afterStateUpdated() function of my custom field is never called. My custom action is a modal containing a form, with my custom field, the code is really simple as below: (Thanks in advance for your help ! 🙂 ) 
use Filament\Tables\Actions\Action;
use Jibaymcs\OrganizeIt\Fields\TasksList;

class ImportTasksAction extends Action
{
    protected function setUp(): void
    {
        parent::setUp();

        $this->name('import_tasks_from_oi');
        $this->label('Import from Organize It');

        $this->form([

            TasksList::make('tasks')
                ->label('Tasks to import'),

        ]);

        $this->action(fn($data) => dd($data));
    }
}
use Filament\Tables\Actions\Action;
use Jibaymcs\OrganizeIt\Fields\TasksList;

class ImportTasksAction extends Action
{
    protected function setUp(): void
    {
        parent::setUp();

        $this->name('import_tasks_from_oi');
        $this->label('Import from Organize It');

        $this->form([

            TasksList::make('tasks')
                ->label('Tasks to import'),

        ]);

        $this->action(fn($data) => dd($data));
    }
}
And the real problem (I think) is on my field and his reactivity. This field is really simple, there's a search input: 
<x-filament::input.wrapper>
    <x-filament::input
        type="text"
        x-model="search"
        placeholder="Search task"
    />
</x-filament::input.wrapper>
<x-filament::input.wrapper>
    <x-filament::input
        type="text"
        x-model="search"
        placeholder="Search task"
    />
</x-filament::input.wrapper>
And the associated "tasks" list: <template x-for="task in tasks" :key="task.id"> The "construction" of my field view is like this:
2 Replies
JibayMcs
JibayMcsOP•2mo ago
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        class="flex flex-col gap-2"
        x-data="{
            search: $wire.$entangle('{{ $getStatePath() }}.search').live,
            tasks: $wire.$entangle('{{ $getStatePath() }}.tasks').live,
            selectedTasks: $wire.$entangle('{{ $getStatePath() }}.selectedTasks').live,
        }"
    >
      <!-- The search input field wrapper is here -->
      <! The <template> loop is here -->
      [...]
    </div>
</x-dynamic-component>
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        class="flex flex-col gap-2"
        x-data="{
            search: $wire.$entangle('{{ $getStatePath() }}.search').live,
            tasks: $wire.$entangle('{{ $getStatePath() }}.tasks').live,
            selectedTasks: $wire.$entangle('{{ $getStatePath() }}.selectedTasks').live,
        }"
    >
      <!-- The search input field wrapper is here -->
      <! The <template> loop is here -->
      [...]
    </div>
</x-dynamic-component>
And here, the code of my custom field: 
use Filament\Forms\Components\Field;
use Jibaymcs\OrganizeIt\Services\OrganizeItService;

class TasksList extends Field
{
    protected string $view = 'organizeit::fields.tasks-list';

    public string $search = '';

    public array $tasks = [];

    public array $selectedTasks = [];

    protected function setUp(): void
    {
        $this->live();

        parent::setUp();

        $this->afterStateHydrated(function(TasksList $component, $state) {
            $component->state([
                'search' => $component->search,
                'tasks' => app(OrganizeItService::class)
                    ->getTasks(statuses: [3])['data'],
                'selectedTasks' => $component->selectedTasks,
            ]);
        });

        $this->afterStateUpdated(function(TasksList $component, $state) {
            //Never triggered ! :'(
           dd($state);
        });
    }

}
use Filament\Forms\Components\Field;
use Jibaymcs\OrganizeIt\Services\OrganizeItService;

class TasksList extends Field
{
    protected string $view = 'organizeit::fields.tasks-list';

    public string $search = '';

    public array $tasks = [];

    public array $selectedTasks = [];

    protected function setUp(): void
    {
        $this->live();

        parent::setUp();

        $this->afterStateHydrated(function(TasksList $component, $state) {
            $component->state([
                'search' => $component->search,
                'tasks' => app(OrganizeItService::class)
                    ->getTasks(statuses: [3])['data'],
                'selectedTasks' => $component->selectedTasks,
            ]);
        });

        $this->afterStateUpdated(function(TasksList $component, $state) {
            //Never triggered ! :'(
           dd($state);
        });
    }

}
JibayMcs
JibayMcsOP•2mo ago
here's my network console
No description

Did you find this page helpful?