UserProfilePage is not allow select element

kalaomer commented 1 month ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] 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

panteliselef commented 1 month ago

Hey @kalaomer from a brief check, I found that both the native select and the one from shadcn/ui work as expected. Please provide us with a reproduction repository, maybe something is conflicting with the rest of the UI / setup.

areeburrub commented 4 days ago

No it's not working the shadcn-ui select menu is also nto working inside the Modal.

panteliselef commented 4 days ago

Hey @areeburrub, please create a public repo and post it here, so we can have a look.

areeburrub commented 4 days ago

Hey @panteliselef this repo is reproducing the issue.

https://github.com/areeburrub/clerk-userpage-issue

the problem is that the shadcn-ui Select Menu is not working inside the

Steps:

Login
Click on the User Button
Click on Manage Account
click the "about you" tab in the manage account modal
Try Selecting something
- The Options are there but it's not visible and clickable.
- if you click on an option by intution of where it should be, it will be clicked and the option will be set.

areeburrub commented 3 days ago

PS: found a way around it also

if we remove the <SelectPrimitive.Portal> wrapper from the SelectContent in the @/components/ui/seletct.tsx then it works as expected.

<SelectPrimitive.Portal>
...
</SelectPrimitive.Portal>

check this

https://github.com/shadcn-ui/ui/issues/1647#issuecomment-2470219660

clerk / javascript