[Bug]: onClick doesn't work on a HeaderMenu 's sub item, in safari browser.

[Gururajj77]

Package

@carbon/react

Browser

Safari

Package version

v11

React version

v1.81.0

Description

the onClick handler isn't getting triggered when the HeaderMenuItem is a sub item of HeaderMenu, and this problem only occurs in safari browser, where as the onClick works fine in chrome and edge browser.

Reproduction/example

https://stackblitz.com/edit/github-idy2xfcw-sujb6u1f?file=src%2FApp.tsx,package.json

Steps to reproduce

1. Open the stackblitz reproduction link in safari browser.
2. Try to click on the "Test" inside the example sub-menu.
3. Notice that, an alert is supposed to pop up.
4. Try the same steps in chrome, the alert comes 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

[mattbaileyuk]

We are hitting a similar problem where the onClick does not trigger in Chrome, Firefox or Safari since 1.81.0. I used the above example to track that down to whether there is an href prop present or not (onClick now only seems to trigger if you also have an href).

We don't have one in our usage of HeaderMenuItem (it should run the function, and not direct the browser), whereas the example here does, and I'm wondering if this is a related issue, that Safari hits the same bug with href="#".