From add373d472fed8c4e0c8e2d60abe1e437c4b1e59 Mon Sep 17 00:00:00 2001
From: TinaH <tinahammar@gmail.com>
Date: Sun, 19 Oct 2025 16:47:46 +0200
Subject: [PATCH 1/2] Fix multiple instances

---
 .../views/components/turnstile.blade.php      | 61 +++++++++++--------
 1 file changed, 37 insertions(+), 24 deletions(-)

diff --git a/resources/views/components/turnstile.blade.php b/resources/views/components/turnstile.blade.php
index 351d3e8..78016fa 100644
--- a/resources/views/components/turnstile.blade.php
+++ b/resources/views/components/turnstile.blade.php
@@ -9,44 +9,57 @@
 
 <x-dynamic-component :component="$fieldWrapperView" :field="$turnstile">
 
-    <div x-data="{
-            state: $wire.entangle('{{ $statePath }}').defer
+    <div wire:ignore
+         x-data="{
+            state: $wire.entangle('{{ $statePath }}').defer,
+            widgetId: null
         }"
-         wire:ignore
-         x-load-js="['https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback']"
+         x-load-js="['https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onTurnstileLoad']"
          x-init="(() => {
-            let options= {
+            let options = {
+                sitekey: '{{config('turnstile.turnstile_site_key')}}',
+                theme: '{{ $theme }}',
+                size: '{{ $size }}',
+                language: '{{ $language }}',
                 callback: function (token) {
                     $wire.set('{{ $statePath }}', token)
                 },
-
-                errorCallback: function () {
+                'error-callback': function () {
                     $wire.set('{{ $statePath }}', null)
-                },
+                }
             }
 
-            window.onloadTurnstileCallback = () => {
-                turnstile.render($refs.turnstile, options)
+            // Render widget when Turnstile API is ready
+            const renderWidget = () => {
+                if (!window.turnstile || !$refs.turnstile || widgetId !== null) {
+                    return;
+                }
+
+                widgetId = turnstile.render($refs.turnstile, options);
             }
 
-            resetCaptcha = () => {
-                turnstile.reset($refs.turnstile)
+            // Called when Turnstile API loads
+            window.onTurnstileLoad = () => {
+                renderWidget();
             }
 
-            $wire.on('reset-captcha', () => resetCaptcha())
+            // If API already loaded (on re-render), render immediately
+            if (window.turnstile) {
+                renderWidget();
+            }
 
-            const observer = new IntersectionObserver((entries) => {
-                  entries.forEach(entry => {
-                      if (entry.isIntersecting && 
-                          window.turnstile && 
-                          !$refs.turnstile.querySelector('.cf-turnstile')) {
-                          turnstile.render($refs.turnstile, options);
-                      }
-                  });
-              }, { threshold: 0.1 })
+            $wire.on('reset-captcha', () => {
+                if (widgetId !== null && window.turnstile) {
+                    turnstile.reset(widgetId);
+                }
+            })
 
-            if ($refs.turnstile) {
-                observer.observe($refs.turnstile);
+            // Cleanup when component is destroyed
+            return () => {
+                if (widgetId !== null && window.turnstile) {
+                    turnstile.remove(widgetId);
+                    widgetId = null;
+                }
             }
         })()"
     >

From 7822770c20b649a969836069e1487e5ca40a7fc7 Mon Sep 17 00:00:00 2001
From: TinaH <tinahammar@gmail.com>
Date: Wed, 22 Oct 2025 08:08:44 +0200
Subject: [PATCH 2/2] remove obsolete data attr.

---
 resources/views/components/turnstile.blade.php | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/resources/views/components/turnstile.blade.php b/resources/views/components/turnstile.blade.php
index 78016fa..7d7c809 100644
--- a/resources/views/components/turnstile.blade.php
+++ b/resources/views/components/turnstile.blade.php
@@ -10,11 +10,11 @@
 <x-dynamic-component :component="$fieldWrapperView" :field="$turnstile">
 
     <div wire:ignore
+         x-load-js="['https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onTurnstileLoad']"
          x-data="{
             state: $wire.entangle('{{ $statePath }}').defer,
-            widgetId: null
+            widgetId: null,
         }"
-         x-load-js="['https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onTurnstileLoad']"
          x-init="(() => {
             let options = {
                 sitekey: '{{config('turnstile.turnstile_site_key')}}',
@@ -63,12 +63,6 @@
             }
         })()"
     >
-        <div data-sitekey="{{config('turnstile.turnstile_site_key')}}"
-             data-theme="{{ $theme }}"
-             data-language="{{ $language }}"
-             data-size="{{ $size }}"
-             x-ref="turnstile"
-        >
-        </div>
+        <div x-ref="turnstile"></div>
     </div>
 </x-dynamic-component>