fix(clerk-js): Fix captcha layout shift on invisible and custom flows #5049

anagstef · 2025-01-30T17:08:24Z

Description

The initial issue:

The Turnstile script causes a minor layout shift when it starts executing. Until now we use to force the Div element rendering the challenge to have max-height set to 0. And then, right before the script becomes interactive we override the styles of it to let it show the challenge. The issue here is that the turnstile script lives outside of the react ecosystem/lifecycles, so if a re-render is triggered on our div element, then it resets to max-height: 0.

Proposed solution:

In order to be able to persist the state that is altered from the outside of this component, we use a MutationObserver and keep the state in a ref, so the latest state is always applied on re-renders, instead of resetting to 0.

In this PR:

This PR is fixing an issue with a layout shift we have on transfer flow, where we could not force the max-height to 0 until now because it was being re-applied on a re-render and the captcha challenge was getting hidden.

Also, we initialize the container element to max-height: 0 for either smart or invisible before captcha.render is called.

Transfer flow with invisible/non-interactive widget:
https://github.com/user-attachments/assets/7d003e65-2ba0-4306-b5c1-6ff6926cc91c

Custom flow invisible/non-interactive widget:

custom-flow-invisible.mp4

Custom flow interactive widget:

custom-flow-interactive.mp4

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-01-30T17:08:29Z

🦋 Changeset detected

Latest commit: e285189

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-01-30T17:08:29Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 31, 2025 2:56pm

anagstef · 2025-01-30T17:08:35Z

!snapshot

clerk-cookie · 2025-01-30T17:10:37Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	2.1.18-snapshot.v20250130170906
@clerk/backend	1.23.10-snapshot.v20250130170906
@clerk/chrome-extension	2.2.4-snapshot.v20250130170906
@clerk/clerk-js	5.50.2-snapshot.v20250130170906
@clerk/elements	0.22.18-snapshot.v20250130170906
@clerk/clerk-expo	2.7.2-snapshot.v20250130170906
@clerk/expo-passkeys	0.1.17-snapshot.v20250130170906
@clerk/express	1.3.45-snapshot.v20250130170906
@clerk/fastify	2.1.18-snapshot.v20250130170906
@clerk/nextjs	6.10.5-snapshot.v20250130170906
@clerk/nuxt	1.0.14-snapshot.v20250130170906
@clerk/clerk-react	5.22.9-snapshot.v20250130170906
@clerk/react-router	1.0.4-snapshot.v20250130170906
@clerk/remix	4.4.20-snapshot.v20250130170906
@clerk/shared	2.20.17-snapshot.v20250130170906
@clerk/tanstack-start	0.9.1-snapshot.v20250130170906
@clerk/testing	1.4.18-snapshot.v20250130170906
@clerk/ui	0.3.19-snapshot.v20250130170906
@clerk/vue	1.1.9-snapshot.v20250130170906

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/ui

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

packages/clerk-js/src/ui/elements/CaptchaElement.tsx

anagstef · 2025-01-31T08:39:47Z

!snapshot

clerk-cookie · 2025-01-31T08:42:00Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	2.1.18-snapshot.v20250131084024
@clerk/backend	1.23.10-snapshot.v20250131084024
@clerk/chrome-extension	2.2.4-snapshot.v20250131084024
@clerk/clerk-js	5.50.2-snapshot.v20250131084024
@clerk/elements	0.22.18-snapshot.v20250131084024
@clerk/clerk-expo	2.7.2-snapshot.v20250131084024
@clerk/expo-passkeys	0.1.17-snapshot.v20250131084024
@clerk/express	1.3.45-snapshot.v20250131084024
@clerk/fastify	2.1.18-snapshot.v20250131084024
@clerk/nextjs	6.10.5-snapshot.v20250131084024
@clerk/nuxt	1.0.14-snapshot.v20250131084024
@clerk/clerk-react	5.22.9-snapshot.v20250131084024
@clerk/react-router	1.0.4-snapshot.v20250131084024
@clerk/remix	4.4.20-snapshot.v20250131084024
@clerk/shared	2.20.17-snapshot.v20250131084024
@clerk/tanstack-start	0.9.1-snapshot.v20250131084024
@clerk/testing	1.4.18-snapshot.v20250131084024
@clerk/ui	0.3.19-snapshot.v20250131084024
@clerk/vue	1.1.9-snapshot.v20250131084024

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/ui

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

panteliselef

🚢

packages/clerk-js/src/ui/elements/CaptchaElement.tsx

panteliselef · 2025-01-31T08:54:27Z

packages/clerk-js/src/ui/elements/CaptchaElement.tsx

+
+  return (
+    <Box
+      ref={elementRef}


you can use a useCallback instead of useEffect + elementRef, but i think this comes down to personal preference, so feel free to ignore.

.changeset/fast-kiwis-visit.md

…#5049)

fix(clerk-js): Refactor how we handle the style on the captcha element

299b92e

clerk-cookie added the clerk-js label Jan 30, 2025

vercel bot deployed to Preview January 30, 2025 17:09 View deployment

anagstef requested review from brkalow, nikosdouvlis and panteliselef January 30, 2025 18:04

anagstef self-assigned this Jan 30, 2025

anagstef commented Jan 30, 2025

View reviewed changes

packages/clerk-js/src/ui/elements/CaptchaElement.tsx Show resolved Hide resolved

anagstef requested a review from alexcarpenter January 30, 2025 18:09

anagstef marked this pull request as ready for review January 30, 2025 18:10

before rendering the challenge initialize max-height to 0 for all

edb4e74

vercel bot deployed to Preview January 31, 2025 08:29 View deployment

panteliselef approved these changes Jan 31, 2025

View reviewed changes

anagstef mentioned this pull request Jan 31, 2025

fix(clerk-js): Fix layout shift on invisible captcha #5044

Closed

9 tasks

add comments

e79e8ac

vercel bot deployed to Preview January 31, 2025 10:50 View deployment

anagstef changed the title ~~fix(clerk-js): Refactor how we handle the style on the captcha element~~ fix(clerk-js): Fix captcha layout shift on invisible captcha and custom flows Jan 31, 2025

anagstef commented Jan 31, 2025

View reviewed changes

.changeset/fast-kiwis-visit.md Outdated Show resolved Hide resolved

Update .changeset/fast-kiwis-visit.md

703b576

anagstef changed the title ~~fix(clerk-js): Fix captcha layout shift on invisible captcha and custom flows~~ fix(clerk-js): Fix captcha layout shift on invisible and custom flows Jan 31, 2025

vercel bot deployed to Preview January 31, 2025 14:35 View deployment

Merge branch 'main' into stefanos/fraud-337

e285189

vercel bot deployed to Preview January 31, 2025 14:56 View deployment

anagstef merged commit 0f95982 into main Jan 31, 2025
29 checks passed

anagstef deleted the stefanos/fraud-337 branch January 31, 2025 15:00

clerk-cookie mentioned this pull request Jan 31, 2025

ci(repo): Version packages #5047

Merged

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025

fix(clerk-js): Fix captcha layout shift on invisible and custom flows (…

90ceed5

…#5049)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(clerk-js): Fix captcha layout shift on invisible and custom flows #5049

fix(clerk-js): Fix captcha layout shift on invisible and custom flows #5049

anagstef commented Jan 30, 2025 •

edited

Loading

changeset-bot bot commented Jan 30, 2025 •

edited

Loading

vercel bot commented Jan 30, 2025 •

edited

Loading

anagstef commented Jan 30, 2025

clerk-cookie commented Jan 30, 2025

anagstef commented Jan 31, 2025

clerk-cookie commented Jan 31, 2025

panteliselef left a comment

panteliselef Jan 31, 2025

fix(clerk-js): Fix captcha layout shift on invisible and custom flows #5049

fix(clerk-js): Fix captcha layout shift on invisible and custom flows #5049

Conversation

anagstef commented Jan 30, 2025 • edited Loading

Description

The initial issue:

Proposed solution:

In this PR:

Checklist

Type of change

changeset-bot bot commented Jan 30, 2025 • edited Loading

🦋 Changeset detected

vercel bot commented Jan 30, 2025 • edited Loading

anagstef commented Jan 30, 2025

clerk-cookie commented Jan 30, 2025

anagstef commented Jan 31, 2025

clerk-cookie commented Jan 31, 2025

panteliselef left a comment

Choose a reason for hiding this comment

panteliselef Jan 31, 2025

Choose a reason for hiding this comment

anagstef commented Jan 30, 2025 •

edited

Loading

changeset-bot bot commented Jan 30, 2025 •

edited

Loading

vercel bot commented Jan 30, 2025 •

edited

Loading