fix: prevent widget to be removed when onWidgetLoad exists

fix #56

demos/nextjs/src/components/demo-widget.tsx

@@ -86,6 +86,7 @@ export default function DemoWidget({
 					setToken(token)
 					setStatus('solved')
 				}}
+				onWidgetLoad={widgetId => console.log('Widget loaded', widgetId)}
 			/>
 
 			<h3>Configuration</h3>

packages/lib/src/lib.tsx

@@ -316,10 +316,6 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 		if (!checkElementExistence(widgetId.current)) return
 
 		onWidgetLoad?.(widgetId.current)
-
-		return () => {
-			if (widgetId.current && window.turnstile) window.turnstile!.remove(widgetId.current)
-		}
 	}, [widgetId, onWidgetLoad])
 
 	useEffect(() => {

test/e2e/basic.test.ts

@@ -17,6 +17,7 @@ const isCI = process.env.CI
 
 let browser: Browser
 let page: Page
+let logsCount = 0
 
 const route = 'basic'
 
@@ -50,6 +51,21 @@ test('widget iframe is visible', async () => {
 		}))
 })
 
+test('`onWidgetLoad` callback is called', async () => {
+	if (logsCount > 0) return
+	const iframe = page.getByTitle('Widget containing a Cloudflare security challenge')
+	const widgetId = await iframe.getAttribute('id')
+	expect(widgetId).toBeDefined()
+
+	page.on('console', msg => {
+		const text = msg.text()
+		if (text.includes('Widget loaded') && logsCount === 0) {
+			logsCount++
+			expect(text).toBe(`Widget loaded ${widgetId}`)
+		}
+	})
+})
+
 test('challenge has been solved', async () => {
 	await ensureChallengeSolved(page)
 	!isCI &&