Description
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
Publishable key
Description
Hi everyone;
I'm developing on Nextjs and using Clerk's components. And i want to add a custom page to user's profile modal to change their system language from select box. And I created a component based on UserButton.UserProfilePage. But I can not activate click action on select element because of a focus event. Here is my code;
<UserButton showName={false}>
<UserButton.UserProfilePage label="Apperence"
labelIcon={<IconWorld size="1rem" strokeWidth="1.4" />}
url={'/profile'}>
<div>
<h3 className="text-md font-[700] mb-4">Apperence</h3>
<hr className="border-gray-200 dark:border-gray-700 mb-4" />
<div className="w-full flex items-center gap-4">
<Label htmlFor="language-simple-switcher" className="text-xs text-gray-900">{t('language')}</Label>
<select name="language-simple-switcher">
<option value="en">English</option>
<option value="tr">Türkçe</option>
<option value="de">Deutsch</option>
</select>
</div>
</div>
</UserButton.UserProfilePage>
</UserButton>After ignore focus event on select, then select is working as expected.
<select name="language-simple-switcher"
onFocus={(e) => {
e.preventDefault();
e.stopPropagation();
}}>
<option value="en">English</option>
<option value="tr">Türkçe</option>
<option value="de">Deutsch</option>
</select>Because of this bug, I can not use shadcn's components as well inside custom profile pages.
Environment
System:
OS: Linux 6.10 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
CPU: (8) arm64 unknown
Memory: 2.28 GB / 5.19 GB
Container: Yes
Shell: 5.2.15 - /bin/bash
Binaries:
Node: 20.9.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.1.0 - /usr/local/bin/npm
npmPackages:
@clerk/localizations: ^2.7.1 => 2.7.1
@clerk/nextjs: ^5.3.7 => 5.3.7
@hookform/resolvers: ^3.9.0 => 3.9.0
@paddle/paddle-js: ^1.2.3 => 1.2.3
@radix-ui/react-collapsible: ^1.1.0 => 1.1.0
@radix-ui/react-dialog: ^1.1.1 => 1.1.1
@radix-ui/react-dismissable-layer: 1.1.0 => 1.1.0
@radix-ui/react-dropdown-menu: ^2.1.1 => 2.1.1
@radix-ui/react-focus-scope: 1.1.0 => 1.1.0
@radix-ui/react-hover-card: ^1.1.1 => 1.1.1
@radix-ui/react-label: ^2.1.0 => 2.1.0
@radix-ui/react-popover: ^1.1.1 => 1.1.1
@radix-ui/react-progress: ^1.1.0 => 1.1.0
@radix-ui/react-scroll-area: ^1.1.0 => 1.1.0
@radix-ui/react-select: ^2.1.2 => 2.1.2
@radix-ui/react-separator: ^1.1.0 => 1.1.0
@radix-ui/react-slot: ^1.1.0 => 1.1.0
@radix-ui/react-switch: ^1.1.0 => 1.1.0
@radix-ui/react-tabs: ^1.1.0 => 1.1.0
@tabler/icons-react: ^3.19.0 => 3.19.0
@tanstack/react-query: ^5.54.1 => 5.54.1
@tanstack/react-table: ^8.20.5 => 8.20.5
@types/node: ^20 => 20.16.2
@types/react: ^18 => 18.3.5
@types/react-dom: ^18 => 18.3.0
@types/sprintf-js: ^1.1.4 => 1.1.4
@types/uuid: ^10.0.0 => 10.0.0
axios: ^1.7.7 => 1.7.7
class-variance-authority: ^0.7.0 => 0.7.0
clsx: ^2.1.1 => 2.1.1
cmdk: 1.0.0 => 1.0.0
eslint: ^8 => 8.57.0
eslint-config-next: 14.2.7 => 14.2.7
framer-motion: ^11.11.4 => 11.11.4
lucide-react: ^0.438.0 => 0.438.0
motion-number: ^0.1.7 => 0.1.7
next: 14.2.7 => 14.2.7
next-intl: ^3.19.1 => 3.19.1
next-themes: ^0.3.0 => 0.3.0
postcss: ^8 => 8.4.41
react: ^18 => 18.3.1
react-aria-components: ^1.4.0 => 1.4.0
react-currency-input-field: ^3.8.0 => 3.8.0
react-dom: ^18 => 18.3.1
react-dropzone: ^14.2.3 => 14.2.3
react-hook-form: ^7.53.0 => 7.53.0
react-use: ^17.5.1 => 17.5.1
sonner: ^1.5.0 => 1.5.0
sprintf-js: ^1.1.3 => 1.1.3
tailwind-merge: ^2.5.2 => 2.5.2
tailwindcss: ^3.4.1 => 3.4.10
tailwindcss-animate: ^1.0.7 => 1.0.7
typescript: ^5 => 5.5.4
uuid: ^10.0.0 => 10.0.0
vaul: ^0.9.2 => 0.9.2
zod: ^3.23.8 => 3.23.8