F
Filamentβ€’10mo ago
devpoolxx

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
LeandroFerreiraβ€’10mo ago
public $skill_ids;
devpoolxx
devpoolxxOPβ€’10mo 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
Solution
LeandroFerreira
LeandroFerreiraβ€’10mo ago
probably the statePath πŸ‘

Did you find this page helpful?