UserButton name when showName={true} is not clickable

[danilofuchs]

• [x] Review the documentation: https://clerk.com/docs
• [x] Search for existing issues: https://github.com/clerkinc/javascript/issues
• [ ] Go through package changelog files.
• [ ] Provide the Frontend API key from your application dashboard.

Package + Version

• [ ] @clerk/clerk-js
• [ ] @clerk/clerk-react
• [x] @clerk/nextjs 4.23.2
• [ ] @clerk/remix
• [ ] @clerk/types
• [ ] @clerk/themes
• [ ] @clerk/localizations
• [ ] @clerk/clerk-expo
• [ ] @clerk/backend
• [ ] @clerk/clerk-sdk-node
• [ ] @clerk/shared
• [ ] @clerk/fastify
• [ ] @clerk/chrome-extension
• [ ] gatsby-plugin-clerk
• [ ] build/tooling/chore
• [ ] other:

Description

When rendering a <UserButton showName />, the rendered name is not treated as a button. The user must click on the Avatar for the popup to appear.

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

[danilofuchs]

Reproduction link: https://github.com/danilofuchs/clerk-username-bug

Sign in and try click at the user name. It will select the text instead of opening the user menu

[moshest]

Any update or workaround on this?

[clerk-cookie]

Hello 👋

We currently close issues after 40 days of inactivity. It's been 30 days since the last update here. If we missed this issue, please reply here. Otherwise, we'll close this issue in 10 days.

As a friendly reminder: The best way to see an issue fixed is to open a pull request. If you're not sure how to do that, please check out our contributing guide.

Thanks for being a part of the Clerk community! 🙏

[danilofuchs]

Hi, any updates?

[kev2010]

+1 to this, quite misleading UX when a user tries to click on the name and nothing happens

[clerk-cookie]

Hello 👋

We currently close issues after 40 days of inactivity. It's been 30 days since the last update here. If we missed this issue, please reply here. Otherwise, we'll close this issue in 10 days.

As a friendly reminder: The best way to see an issue fixed is to open a pull request. If you're not sure how to do that, please check out our contributing guide.

Thanks for being a part of the Clerk community! 🙏

[jescalan]

Sorry for the lack of updates here, we have resolved this in the next major release of our SDKs, which is planned to release in the next couple weeks 🎉

[maosin77]

The problem is still not solved. It's pretty funny that the clerk is so polished and the UD/UX is so nice, and you guys didn't figure it out :D Probably someone was coding this part on Friday afternoon:D

For those who need this adjustment here is dirty workaround probably enough especially we are waiting for announced fix from clerk team :)

  useEffect(() => {
        const addListenerToUserName = () => {
            const userProfileButton = document.querySelector(
                ".cl-userButtonTrigger"
            ) as HTMLButtonElement | null;

            const userProfileLabel = document.querySelector(
                ".cl-userButtonOuterIdentifier"
            ) as HTMLButtonElement | null;

            const name = userProfileLabel?.textContent;

            const span = document.createElement("span");
            span.textContent = name ?? "";
            span.classList.add("cl-userButtonOuterIdentifier");

            userProfileButton?.appendChild(span);

            userProfileLabel?.remove();
        };

        const isRendered = () => {
            const userProfile = document.querySelector(
                ".cl-userButtonTrigger"
            ) as HTMLButtonElement | null;

            const res = Boolean(userProfile);

            return res;
        };

        const modifyUserLabel = () => {
            if (isRendered()) {
                addListenerToUserName();
            } else {
                setTimeout(() => {
                    modifyUserLabel();
                }, 100);
            }
        };

        modifyUserLabel();
    }, []);
    ```

[jescalan]

Apologies once again, the major release cycle was delayed quite a bit 😓 An official solve here should arrive in the next 2 weeks at this point.

[jescalan]

Small update to any onlookers here, this fix should be available now in our latest beta version!

[NiluK]

This is fixed in core beta 2.0 components :)