search

AbanoubNassem / filament-grecaptcha-field

Provides a Google reCaptcha V2 field for the Filament Forms(V2-V3), works in Admin-Panel and Forntend-Forms.
MIT License
18 stars 7 forks source link

Livewire V3: `reCAPTCHA placeholder element must be empty` issue while using `navigate: true` #9

Open alignwebs opened 9 months ago

alignwebs commented 9 months ago

Description

When navigating back to a form page that uses reCAPTCHA after invoking navigate: true in Livewire V3, the reCAPTCHA loader doesn't seem to stop spinning. This also triggers a JavaScript console error: reCAPTCHA placeholder element must be empty.

Steps to Reproduce

  1. Start on a form page with a reCAPTCHA validation field.
  2. Use a Livewire component with navigate: true to navigate away from the page.
  3. Navigate back to the form page.

Expected behavior: The reCAPTCHA field should render successfully, allowing the user to complete the action and submit the form.

Actual behavior: The reCAPTCHA spinner continuously spins and does not allow for user interaction. The JavaScript console throws an error saying reCAPTCHA placeholder element must be empty.

image

Additional Information

This issue revolves around navigation using Livewire V3 and affects the user's ability to interact with the reCAPTCHA validation.

Any help in addressing this problem would be greatly appreciated. Please let me know if you need more information.

AbanoubNassem commented 9 months ago

I can't reproduce it , if possible to share a repo with the code breaking , would be appreciated .

alignwebs commented 9 months ago

It's a private project. Will try to create new one soon