Custom page with form and select input

I have this custom page:

<?php

namespace App\Admin\Resources\TalentResource\Pages;

use App\Admin\Resources\TalentResource;
use App\Models\Skill;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Resources\Pages\Page;
use Illuminate\Contracts\View\View;

class ReviewTalent extends Page
{
    use InteractsWithForms;

    protected static string $resource = TalentResource::class;

    protected static string $view = 'admin.resources.talent-resource.pages.review-talent';

    public $first_name;
    public $content;

    public function mount(): void
    {
        $this->first_name = 'testing12312';
    }

    protected function getFormSchema(): array
    {
        return [
            Select::make('skill_ids')
                ->multiple()
                ->label('Skills')
                ->columnSpanFull()
                ->getSearchResultsUsing(fn (string $search): array => Skill::where('value', 'ilike', "%{$search}%")->limit(40)->pluck('value', 'id')->toArray())
                ->getOptionLabelsUsing(fn (array $values): array => Skill::whereIn('id', $values)->pluck('value', 'id')->toArray())
                ->required()
        ];
    }

    public function submit()
    {
        dd($this->form->getState());
    }
}

<?php

namespace App\Admin\Resources\TalentResource\Pages;

use App\Admin\Resources\TalentResource;
use App\Models\Skill;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Resources\Pages\Page;
use Illuminate\Contracts\View\View;

class ReviewTalent extends Page
{
    use InteractsWithForms;

    protected static string $resource = TalentResource::class;

    protected static string $view = 'admin.resources.talent-resource.pages.review-talent';

    public $first_name;
    public $content;

    public function mount(): void
    {
        $this->first_name = 'testing12312';
    }

    protected function getFormSchema(): array
    {
        return [
            Select::make('skill_ids')
                ->multiple()
                ->label('Skills')
                ->columnSpanFull()
                ->getSearchResultsUsing(fn (string $search): array => Skill::where('value', 'ilike', "%{$search}%")->limit(40)->pluck('value', 'id')->toArray())
                ->getOptionLabelsUsing(fn (array $values): array => Skill::whereIn('id', $values)->pluck('value', 'id')->toArray())
                ->required()
        ];
    }

    public function submit()
    {
        dd($this->form->getState());
    }
}

with this blade component

<x-filament-panels::page>
    <x-filament-panels::form wire:submit="submit">
        {{ $this->form }}
        <div>
        <x-filament::button type="submit" size="sm">
            Submit
        </x-filament::button>
        </div>
    </x-filament-panels::form>
</x-filament-panels::page>

<x-filament-panels::page>
    <x-filament-panels::form wire:submit="submit">
        {{ $this->form }}
        <div>
        <x-filament::button type="submit" size="sm">
            Submit
        </x-filament::button>
        </div>
    </x-filament-panels::form>
</x-filament-panels::page>

The problem is the multiple option on Select component, whenever I type on the field, it throws ComponentNotFoundException..

Solution:

probably the statePath 👍

Jump to solution

3 Replies

LeandroFerreira•3mo ago

public $skill_ids;

devpoolxx•3mo ago

@Leandro Ferreira thank you! I figured this out that i've been doing the pages & component logic incorrect. I just followed this: https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component

Adding an action to a Livewire component - Actions - Filament

Solution

LeandroFerreira•3mo ago

probably the statePath 👍

Gaming

Programming

Custom page with form and select input