`turbo: true` doesn't work with `turbo-refresh-method=morph`

[pedantic-git]

Hello! This gem is an absolute lifesaver - I was able to get recaptcha on my site quickly once the spammers found it.

I noticed one thing - the turbo: true flag (I'm using it on recaptcha_v3) doesn't work when turbo-refresh-method is set to morph.

The reason, as far as I can tell, is that the script tag is just left intact within the DOM, since it doesn't change and consequently it never knows to execute its onload handler.

I can think of a few ways to fix this, but none of them are elegant, so I thought I'd start a discussion here first. I'm very happy to contribute what I can!

[grosser]

I don't know much about turbo/morph, so whatever idea is most elegant would be nice :)

... maybe list the ideas you got and we can pick one

[pedantic-git]

@grosser Thanks for your quick reply! (I didn't get a notification except by email so I missed it!)

The two immediate ideas that come to mind are:

1. Have the <script> tag generate a random unique id attribute every time it is rendered. The idiomorph docs suggest that it will never consider two elements with different ids to be the same element.
2. Have turbo: true set up an event listener for one of Turbo's events instead of using the onload handler built into reCaptcha. This will also have the advantage of allowing people to load the reCaptcha library in their head tag if they want to.

The former is probably more resilient against usage for other non-Turbo environments (such as Turbolinks) but the latter is probably more "Turbo-like".

If I was building this from scratch, I'd use a Stimulus controller for this, but I don't know if we can assume all Turbo users also have Stimulus installed (although I bet it's a high percentage).

[grosser]

the script id sounds super simple an at no risk of breaking anything else, so I'd go for that :)

…

On Mon, Oct 21, 2024 at 4:01 AM Quinn ***@***.***> wrote: @grosser <https://github.com/grosser> Thanks for your quick reply! (I didn't get a notification except by email so I missed it!) The two immediate ideas that come to mind are: 1. Have the <script> tag generate a random unique id attribute every time it is rendered. The idiomorph <https://github.com/bigskysoftware/idiomorph> docs suggest that it will never consider two elements with different ids to be the same element. 2. Have turbo: true set up an event listener for one of Turbo's events <https://turbo.hotwired.dev/reference/events> instead of using the onload handler built into reCaptcha. This will also have the advantage of allowing people to load the reCaptcha library in their head tag if they want to. The former is probably more resilient against usage for other non-Turbo environments (such as Turbolinks) but the latter is probably more "Turbo-like". If I was building this from scratch, I'd use a Stimulus controller for this, but I don't know if we can assume *all* Turbo users also have Stimulus installed (although I bet it's a high percentage). — Reply to this email directly, view it on GitHub <#456 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAACYZ5CGVT75BCBP7NKFE3Z4TNIZAVCNFSM6AAAAABP5LQH6GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMRWGM2DANBVGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[pedantic-git]

Hmm - so this wasn't enough. I'm not sure if changing the id on every request was enough for the onload handler to be called again (because I went down a debugging hole before I could verify, but my debugging hole turned up that even if you run the onload handler again, it still doesn't cause the recaptcha to appear.

I think I need to find a way to use the turbo:morph event to trigger a reset() on the recaptcha that's still loaded into memory. I can hide this behind a new morph parameter if you don't want the turbo parameter to add this event handler in automatically.

Sadly I won't have time to implement this before Monday next week but I'm still happy to keep trying!

[pedantic-git]

My apologies for how long this is taking to debug. I'm only working at this job one day a week and it keeps falling down my priority list. I do want to fix it, though!