FilamentF
Filament•9mo ago
Arjen

GRecaptcha field disappears on livewire/update in a Livewire Component, but not in Panel Resource

I've implemented the Captcha field in a Livewire Component, but after doing the captcha or saving the form, the captcha disappears. It seems wire:ignore here is not respected. The weird thing here is when I place this Captcha field inside a panel resource form, it works correctly and does not disappear. I've tried moving the wire:ignore but it's not working. I could really use some assistence here.

<?php

namespace App\Livewire;

use AbanoubNassem\FilamentGRecaptchaField\Forms\Components\GRecaptcha;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;

class SignUpForm extends Component implements HasForms
{
    use InteractsWithForms;

    public $captcha = '';

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                'captcha' => GRecaptcha::make('captcha')
                    ->label('Captcha')
                    ->validationMessages([
                        'required' => 'De captcha is verplicht.',
                    ]),
            ]);
    }

    public function create(): void
    {
        $data = $this->form->getState();
    }

    public function render()
    {
        return view('livewire.sign-up-form');
    }
}


<div>
    <form wire:submit="create">
        {{ $this->form }}

        <button class="button" type="submit">
            Versturen
        </button>
    </form>

    <x-filament-actions::modals />
</div>
Solution
I've figured it out, I had moved the app script in @vite to before the body, when I moved it back to the head, it works as it should.

Wrong:
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    {{-- // --}}
    @filamentStyles
    @vite(['resources/css/filament/platform/theme.css', 'resources/css/app.css'])
</head>

<body>
    {{-- // --}}
    @filamentScripts
    @vite('resources/js/app.js')
</body>

</html>


Good:
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    {{-- // --}}
    @filamentStyles
    @vite(['resources/css/filament/platform/theme.css', 'resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
    {{-- // --}}
    @filamentScripts
</body>
</html>
Jump to solution
Was this page helpful?