Filament•5mo ago

An issue in calling a Livewire component inside custom field

I am trying to Call a liveware component inside a Filament custom component. but I get in browser console: livewire.js?id=cc800bf4:4493 Uncaught Snapshot missing on Livewire component with id: tKy6aA8eZYpGT01wuW8h the custom Field:

use Filament\Forms\Components\Field;

class ImportLessonMaterial extends Field
{
    protected string $view = 'filament.import-lesson-material';
}

use Filament\Forms\Components\Field;

class ImportLessonMaterial extends Field
{
    protected string $view = 'filament.import-lesson-material';
}

the view filament.import-lesson-material blade:

@livewire('create-post')

@livewire('create-post')

the liveware component:

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

the view livewire.create-post blade:

<div>
    here we go...
</div>

<div>
    here we go...
</div>

the custom field usage inside filament EditPage:

ImportLessonMaterial::make('import_lesson_material')->columnSpan('full')

ImportLessonMaterial::make('import_lesson_material')->columnSpan('full')

To be noted: - I followed (https://filamentphp.com/docs/3.x/forms/fields/custom) to create a custom field. - I followed (https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form) to create a liveware component. - this is a simplified description of my main issue that I already posted before (https://discord.com/channels/883083792112300104/1275799281592303697)

Custom fields - Form Builder - Filament

Adding a form to a Livewire component - Form Builder - Filament

7 Replies

Mohammed OudaOP•5mo ago

here is a video showing the apperance of the issue.

awcodes•5mo ago

Livewire components can’t be directly inserted into a form schema you have to pass them into the Livewire form component field. https://filamentphp.com/docs/3.x/forms/advanced#inserting-livewire-components-into-a-form

Advanced forms - Form Builder - Filament

Mohammed OudaOP•5mo ago

Thanks, I updated the call to

Livewire::make(ImportLessonMaterial::class, function($state){
                                            return [
                                                'course' => $this->record,
                                                'lesson' => $state
                                            ];
                                        })
                                        ->key('import-lesson-material-' . rand(10,100))

Livewire::make(ImportLessonMaterial::class, function($state){
                                            return [
                                                'course' => $this->record,
                                                'lesson' => $state
                                            ];
                                        })
                                        ->key('import-lesson-material-' . rand(10,100))

and it solved the mentioned issue, but still when i include my component the main submit of the entire page went unclickable, not functioning. like the attached video.

Mohammed OudaOP•5mo ago

if it may help, here is my liveware component code:

message.txt

awcodes•5mo ago

Sorry, not sure what your video is showing. I think your livewire component is doing too much. Ie, you Lw component has its own form and you are trying to include a form inside of a form. If you are including a field inside a form then the field can’t have its own form. There’s where actions come in. Not really a filament issue, but an html spec issue. Hope that makes sense. Sorry.

Mohammed OudaOP•5mo ago

Sorry, but do you mean the issue is calling a liveware component form inside a filament edit page form? The video is showing that after including my component, the edit page submit became not functioning.

awcodes•5mo ago

Yea. You’re livewire component is outputting a form, but since it is a field it is outputting a form inside of a form, which isn’t valid html. The page itself is a livewire component with a form. So any fields inside of that should not have their own forms. Unless they are actions. But that’s not your use case. Basically, you’re saying that the field inside the form is a form. And that’s just not possible with the html spec.

Gaming

Programming

An issue in calling a Livewire component inside custom field