Signup.Action submit is not working when signing up user, using shadcnUI customizable elements

[joao-porttela]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/joao-porttela/Nextjs-Clerk-auth

Publishable key

pk_test_cmljaC1mYWxjb24tOTguY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Steps to reproduce:
In chrome:

1. Follow link clerk.com/docs/customization/elements/examples/shadcn-ui
2. Create some routes, e.g. /, /dashboard, /sign-in, /sign-up. These are included in the repo.
3. Configure the clerk options in the middleware.ts file for the desirable URLs, as such:

const clerkOptions: ClerkMiddlewareOptions = {
  signInUrl: "/sign-in",
  signUpUrl: "/sign-up",
  afterSignInUrl: "/dashboard",
  afterSignUpUrl: "/dashboard",
};

5. Click on the "Sign in" link in the home page '/'/
6. Click on 'Don't have an account? Sign up' link.
7. Sign up using email and password.
8. Verify email.
9. Input your username and sign up.

Expected behavior:

Register user and redirect to /dashboard.

Actual behavior:

Nothing happens, user is not registered and stays in the same URL /sign-up/continue.

Relevant Line of Code

...

<SignUp.Step name="continue">
	<Card className="w-full sm:w-96">
        	<CardHeader>
                	<CardTitle>Continue registration</CardTitle>
		</CardHeader>
		<CardContent>
			<Clerk.Field name="username" className="space-y-2">
				<Clerk.Label>
                        		<Label>Username</Label>
                      		</Clerk.Label>
                      		<Clerk.Input type="text" required asChild>
                        		<Input />
                      		</Clerk.Input>
                      		<Clerk.FieldError className="block text-sm text-destructive" />
                    	</Clerk.Field>
		</CardContent>
                <CardFooter>
                	<div className="grid w-full gap-y-4">
				<SignUp.Action submit asChild>
					<Button disabled={isGlobalLoading}>
						<Clerk.Loading>
							{(isLoading) => {
		                              			return isLoading ? (
								<Icons.spinner className="size-4 animate-spin" />) : 
								("Continue");
                            				}}
                          			</Clerk.Loading>
                        		</Button>
                      		</SignUp.Action>
                    	</div>
		</CardFooter>
	</Card>
</SignUp.Step>
...

Environment

System:
    OS: Windows 11 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 3.80 GB / 15.79 GB
  Binaries:
    Node: 21.6.1 - ~\AppData\Roaming\npm\node.CMD
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @clerk/elements: ^0.16.1 => 0.16.1
    @clerk/nextjs: ^5.1.5 => 5.7.2
    @radix-ui/react-label: ^2.1.0 => 2.1.0
    @radix-ui/react-slot: ^1.1.0 => 1.1.0
    @types/node: ^20.11.0 => 20.12.7
    @types/react: ^18.2.47 => 18.2.79
    @types/react-dom: ^18.2.18 => 18.2.25
    @types/react-syntax-highlighter: ^15.5.11 => 15.5.11
    autoprefixer: ^10.4.16 => 10.4.19
    class-variance-authority: ^0.7.0 => 0.7.0
    clsx: ^2.1.1 => 2.1.1
    lucide-react: ^0.453.0 => 0.453.0
    next: ^14.2.3 => 14.2.15
    postcss: ^8.4.33 => 8.4.38
    prism-react-renderer: ^2.3.1 => 2.3.1
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    react-syntax-highlighter: ^15.5.0 => 15.5.0
    tailwind-merge: ^2.5.4 => 2.5.4
    tailwindcss: ^3.4.1 => 3.4.3
    tailwindcss-animate: ^1.0.7 => 1.0.7
    typescript: ^5.3.3 => 5.4.5

[joao-porttela]

Solved

I had to configure to accept the phone number or not require it during signup in the clerk dashboard.