Tabs in overflow are not activated when clicked

[OhMyCats]

Describe the bug

Clicking on a tab which is in overflow menu does not set that tab active and does not switch to its content. At the same time using keyboard arrow keys and selecting a tab in the overflow works as intended. It appears as if a mouse click event is not registered at all.

This bug was observed only on macOS across several different versions of Firefox and Safari, but not in Chromium-based browsers (Chrome, Brave, Vivaldi). Also, in all said browsers on Linux and MS Windows clicking on tabs in overflow worked as intended.

How to reproduce

The provided example is basically the tabs overflow example from the Clarity documentation:
https://stackblitz.com/edit/clarity-light-theme-v5-tabdwp?file=src%2Fapp%2Fapp.component.html

Steps to reproduce the behavior:

1. Go to example
2. Click on Name2 tab -> Content2 is displayed
3. Click on Name1 tab -> Content1 is displayed
4. Click on overflow menu ... and click on Name3 or Name4
5. The corresponding tab is not marked as active and its content is not displayed
6. Press tab and use keyboard arrow keys to navigate to the tabs overflow menu, select Name3 or Name4, hit Enter
7. The content corresponding to the tab in the overflow is properly displayed

Expected behavior

Clicking on tabs in overflow menu must set the corresponding tab active and display its content.

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• v5.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 11

Device:

• Type: MacBook, MacMini
• OS: macOS (10.15.x, 10.14.x)
• Browser: Firefox, Safari
• Version: 86.x, 85.x, 84.x (Firefox), 14.0.3, 14.0.2, 14.0.1 (Safari)

[bbogdanov]

Hi @OhMyCats,

The issues is really strange.

I was able to reproduce it.

The team will need some time to investigate in order to find the root cause. We will get back to you as soon as we have progress to share.

[OhMyCats]

Hi @bbogdanov,
Thanks for verifying the issue and adding this bug to the todo list!
The problem is indeed an odd one. I had hoped it was something on my end, but we have what we have. x)

[kjetilhp]

any update on this issue?

[hippee-lee]

This issue is in the backlog, waiting for the resources to investigate.

[kjetilhp]

Hi, was little fast to conclude that this was the same as my problem. My behaviour is similar but happens when the overflow is used on mobile. When on mobile I am unable to click/touch the items in the overflow list, no event occurs. The overflow is working as it should when in browser phone simulator and on regular browser. However, on the phone or in the iOS xcode simulator nothing happens when clicking the items. Items are just highlighted and then it disappears without selecting the tab. Tried adding click action to see if anything happens when clicking on the item, but no luck. Unable to provide an stackblitz, can't get it to work with latest version of clr/angular.

[hippee-lee]

@kjetilhp - can you open a new issue since yours is different from this one. Please provide as detailed of a reproduction guide that you can and a stackblitz with the code that is giving you issues. As far as I remember, the iOS simulator should be able to handle stackblitz, no?

[kjetilhp]

@hippee-lee managed to get stackblitz to work, cloning the link above, as long as I don't upgrade to clr 5.3 and angular 12. And the error is present when loading https://clarity-overflow-problem.stackblitz.io in the iOS simulator. I will create a separate issue #6046

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.