fix(ui): pass boolean inert for interactive captcha

.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.

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 {
             <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

packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx

@@ -1097,6 +1097,7 @@ describe('SignInStart', () => {
       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();

packages/ui/src/components/SignUp/SignUpStart.tsx

@@ -1,5 +1,6 @@
 import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
 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';
@@ -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

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();