From 6f04ba5ec98e92e893ba952ded80d0b0a9ee66aa Mon Sep 17 00:00:00 2001 From: Arjun Vijay Prakash Date: Sun, 20 Sep 2026 18:14:36 +0530 Subject: [PATCH 1/2] fix(ui): pass boolean inert for interactive captcha --- .changeset/fix-ui-captcha-inert-boolean.md | 5 +++++ packages/ui/src/components/SignIn/SignInStart.tsx | 4 ++-- .../ui/src/components/SignIn/__tests__/SignInStart.test.tsx | 1 + packages/ui/src/components/SignUp/SignUpStart.tsx | 4 ++-- .../ui/src/components/SignUp/__tests__/SignUpStart.test.tsx | 1 + 5 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 .changeset/fix-ui-captcha-inert-boolean.md diff --git a/.changeset/fix-ui-captcha-inert-boolean.md b/.changeset/fix-ui-captcha-inert-boolean.md new file mode 100644 index 00000000000..ce5ebc6061a --- /dev/null +++ b/.changeset/fix-ui-captcha-inert-boolean.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Use a React 19-safe boolean `inert` value when the sign-in or sign-up captcha becomes interactive, so the form is actually inert and the empty-string warning is gone. diff --git a/packages/ui/src/components/SignIn/SignInStart.tsx b/packages/ui/src/components/SignIn/SignInStart.tsx index 5e55b7223c6..5716c38e3b6 100644 --- a/packages/ui/src/components/SignIn/SignInStart.tsx +++ b/packages/ui/src/components/SignIn/SignInStart.tsx @@ -1,4 +1,5 @@ import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode'; +import { inertProps } from '@clerk/shared/inert'; import { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants'; import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; import { getClerkQueryParam, removeClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams'; @@ -626,8 +627,7 @@ function SignInStartInternal(): JSX.Element { { simulateCaptchaInteractive(getCaptcha()); await waitFor(() => expect(google.closest('[inert]')).not.toBeNull()); + expect(google.closest('[inert]')?.hasAttribute('inert')).toBe(true); // The captcha widget and the header stay outside the inert subtree. expect(getCaptcha().closest('[inert]')).toBeNull(); expect(screen.getByRole('heading').closest('[inert]')).toBeNull(); diff --git a/packages/ui/src/components/SignUp/SignUpStart.tsx b/packages/ui/src/components/SignUp/SignUpStart.tsx index e146fd0341d..0cb6326ff60 100644 --- a/packages/ui/src/components/SignUp/SignUpStart.tsx +++ b/packages/ui/src/components/SignUp/SignUpStart.tsx @@ -1,4 +1,5 @@ import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode'; +import { inertProps } from '@clerk/shared/inert'; import { isClerkAPIResponseError } from '@clerk/shared/error'; import { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants'; import { getClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams'; @@ -415,8 +416,7 @@ function SignUpStartInternal(): JSX.Element { direction='col' elementDescriptor={descriptors.main} gap={6} - // @ts-ignore - `inert` is not yet in the installed React types - inert={captchaIsInteractive ? '' : undefined} + {...inertProps(captchaIsInteractive)} // `display:none` (not `visibility:hidden`) so the collapsed column leaves flex flow and // contributes no `gap` gutter to `Card.Content` — otherwise it injects empty space above // the spotlighted captcha. Subtree stays mounted (form state preserved); `inert` is then diff --git a/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx index eb5fb3f4739..cd9a0dca1d6 100644 --- a/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx +++ b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx @@ -639,6 +639,7 @@ describe('SignUpStart', () => { simulateCaptchaInteractive(getCaptcha()); await waitFor(() => expect(google.closest('[inert]')).not.toBeNull()); + expect(google.closest('[inert]')?.hasAttribute('inert')).toBe(true); expect(getCaptcha().closest('[inert]')).toBeNull(); expect(screen.getByRole('heading').closest('[inert]')).toBeNull(); From 5ca1746f85b358398d97fe16f21469ac2e97b23a Mon Sep 17 00:00:00 2001 From: Arjun Vijay Prakash Date: Sun, 20 Sep 2026 18:15:13 +0530 Subject: [PATCH 2/2] fix(ui): sort captcha inert import --- packages/ui/src/components/SignUp/SignUpStart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/SignUp/SignUpStart.tsx b/packages/ui/src/components/SignUp/SignUpStart.tsx index 0cb6326ff60..11647cefa17 100644 --- a/packages/ui/src/components/SignUp/SignUpStart.tsx +++ b/packages/ui/src/components/SignUp/SignUpStart.tsx @@ -1,6 +1,6 @@ import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode'; -import { inertProps } from '@clerk/shared/inert'; import { isClerkAPIResponseError } from '@clerk/shared/error'; +import { inertProps } from '@clerk/shared/inert'; import { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants'; import { getClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams'; import { useClerk } from '@clerk/shared/react';