[Bug]: onClick doesn't work on a HeaderMenuItem if there is no href prop

[mattbaileyuk]

Package

@carbon/react

Browser

Firefox, Safari, Chrome

Package version

1.81.0+

React version

v18.3.1 (also seen on v19)

Description

TheonClick handler is not getting triggered for a HeaderMenuItem if it does not have an href prop. This only happens from @carbon/react 1.81.0 onwards, and broke our existing usage which should trigger a function to pop up a dialog and not change the page.

(Example adapted from #19401 which is similar but Safari-specific, and did have href prop I took out of my reproduction example)

A workaround has been to provide an href prop, but as we don't want the page to reload/change, we've had to use preventDefault() in the onClick function.

Reproduction/example

https://stackblitz.com/edit/github-idy2xfcw-flabvycf?file=package.json

Steps to reproduce

1. Open the stackblitz reproduction link in any browser
2. Try to click on the "Test" button inside the example submenu
3. Nothing happens, but an alert should pop up
4. Change @carbon/react in package.json down to 1.80.0 and rerun
5. Try the "Test" button again and the alert shows up

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[adamalston]

The following change addresses this issue:

diff --git a/packages/react/src/components/UIShell/HeaderMenuItem.tsx b/packages/react/src/components/UIShell/HeaderMenuItem.tsx
index d2e86fdc1..49e89a718 100644
--- a/packages/react/src/components/UIShell/HeaderMenuItem.tsx
+++ b/packages/react/src/components/UIShell/HeaderMenuItem.tsx
@@ -51,7 +51,7 @@ const HeaderMenuItem = forwardRef(function HeaderMenuItem<
     'aria-current': ariaCurrent,
     children,
     role,
-    tabIndex,
+    tabIndex = 0,
     ...rest
   }: Omit<HeaderMenuItemProps<E>, 'ref'>,
   ref: ForwardedRef<E>

This change sets a default tabIndex of 0, making the anchor focusable even without an href.

The default value for tabIndex was deleted in #18207, but it’s unclear why. Without an href, an anchor isn’t focusable, and in most cases, probably shouldn’t be an anchor at all. If it’s not used for navigation, a <button> or another interactive element may be more semantically correct.

I'm wondering whether we should restore the default value for tabIndex or do something else to improve HeaderMenuItem. @tay1orjones, do you remember why the default value for this prop was deleted in #18207?