[Question]: HeaderMenu component shortens url to `#`, is this a known Carbon bug?

[angella-qian]

Question for Carbon

I've tried posting in our #carbon-react channel but haven't received any responses there so wanted to post and see if I could get any help with this here.

Wondering if someone has come across this or if this is a known Carbon bug. We’re seeing that anytime you click our HeaderMenu component, the url shortens to #. We're using the HeaderMenu here to allow users to create a new assistant or switch between existing assistants. I see on the implicit <a> tag there’s an href set to # so I’m thinking that’s what’s causing it. I’m unable to set a event.preventDefault() or event.stopPropagation() on this <a> tag though - I’ve tried adding it to the onClick handler of HeaderMenuItem and more.

Related code:

  const openCreateModal = useCallback(() => {
    setIsCreateModalOpen(true);
  }, []);

  const handleSwitchAssistant = useCallback(
    id => {
      history.push(
        urlJoin(encodeURIComponent(instance), 'assistants', id, 'home')
      );
    },
    [history, instance]
  );

 <HeaderNavigation>
       <HeaderMenu
            menuLinkName={menuName}>
            <HeaderMenuItem onClick={openCreateModal}>
                <div>
                   Create New
                   <Add24 />
                 </div>
            </HeaderMenuItem>
            {assistants
              .filter(a => a.assistant_id !== assistant?.assistant_id) // Ignore the selected assistant
              .map(a => (
                  <HeaderMenuItem
                     onClick={() => handleSwitchAssistant(a.assistant_id)}
                     key={a.assistant_id}>
                        {a.name ?? 'Unnamed'}
                   </HeaderMenuItem>
              ))}
       </HeaderMenu>
</HeaderNavigation>

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[joshblack]

Hi there, @angella-qian! 👋 Thanks for taking the time to put this issue together 🙏

I went ahead and opened up #10967 to remove the href="#" that is being set with HeaderMenu. For next steps, I'm going to double check with the team that this makes sense from an accessibility perspective. If it all checks out, we can merge it in.

Hope this makes sense! Let me know if you have any questions.

[angella-qian]

@joshblack Hey, yep! And thanks for the quick response – just wondering if you have an eta of when this fix will go out?

[miniwangdali]

@joshblack Hey, I notice that the fix was closed without merging. Are we still going to have another fix to resolve the problem?

[jnm2377]

Hi @angella-qian @miniwangdali there were some a11y concerns with the PR implementation that was opened for this issue. Unfortunately @joshblack has actually moved on to a new team 😢 At the moment, we don't have any further explorations planned, but we would welcome a PR to fix this 🙏🏽

[guidari]

Hey @angella-qian I was checking this issue and looks like have been fixed. I couldn't reproduce in the storybook. The "#" is not being placed in the URL.

If the error persists, could you reproduce it on Stackblitz, please?

[guidari]

We will close this issue, but if you find this issue is not actually resolved, please open a new issue and include a link back to this issue.