marsidev/react-turnstile

onWidgetLoad is not called after a reload

EnzeGH opened this issue · 1 comments

Hello there,

The documentation for the onWidgetLoad() prop states the following:
"Callback invoked when the widget is loaded or reloaded (e.g., after a reset)."

However, when you run ref.current?.reset(), it is not being called again. Here's a small demo:

import { Turnstile } from "@marsidev/react-turnstile";
import { useRef } from "react";

export default function App() {
  const ref = useRef(null);

  return (
    <>
      <Turnstile
        ref={ref}
        siteKey="1x00000000000000000000AA"
        onWidgetLoad={() => console.log("Loaded!")}
      />

      {/* @ts-ignore */}
      <button onClick={() => ref.current?.reset()}>Reset widget</button>
    </>
  );
}

Hey @EnzeGH, thanks for bringing up this issue!

Currently, the onWidgetLoad callback is called after a successful execution of the internal window.turnstile?.render() method, as it returns the ID of the widget if the rendering was successful.

If you remove a widget and then explicitly render it, you will see the callback run again.

Maybe we should rename it to onWidgetRendered?

On the other hand, the window.turnstile?.reset() method does not return anything, so we can't know if the resetting has been successful or not. At this moment, I haven't found a way to run a callback after a successful reset (PRs welcome!)

Alternatively, you can use the onSuccess callback, which is a native callback and is executed when a widget is solved.