F
Filament•3w 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');
    }
}
<?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>
<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 <html lang="{{ strreplace('', '-', app()->getLocale()) }}">...
Jump to solution
3 Replies
LeandroFerreira
LeandroFerreira•3w ago
not sure if this is the issue, but add form->fill() to the mount method: 
public function mount(): void
{
    $this->form->fill();
}
public function mount(): void
{
    $this->form->fill();
}
Arjen
ArjenOP•3w ago
That sadly wasn't the issue. I had that before in my class, but I wrongfully omitted it in the example.
Solution
Arjen
Arjen•3w ago
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>
<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>
<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>

Did you find this page helpful?