UserProfilePage is not allow select element

Question

UserProfilePage is not allow select element

Opened this issue a month ago · 5 comments

kalaomer commented a month ago

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

Answer 1 · 2024-10-15T08:21:44.000Z

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.

Answer 2 · 2024-11-12T10:37:18.000Z

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

Answer 3 · 2024-11-12T13:56:19.000Z

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

Answer 4 · 2024-11-13T04:47:56.000Z

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 <UserButton.UserProfilePage/>

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.

Answer 5 · 2024-11-13T04:54:00.000Z

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

shadcn-ui/ui#1647 (comment)