tabs not clickable on tabs component on edge and Chrome

[JoelLucuik]

Browser details: os=Windows&os_version=11&browser=Edge&browser_version=124.0&resolution=1920*1080

AEM sites. our SDK is "aem-sdk-2023.12.14697.20231215T125030Z-231200.zip"

Sorry I am still relatively new to the team here.

My QA team says this is intermittent. On Tabs component tabs are not clickable. On Edge and Chrome

Console output when it happens:

[gkalyan]

@JoelLucuik 

This looks like a internal code error which might be conflicting with tab component code and causing this issue.

Do you see this error in your Publish?

[joel_at_verb]

yes on publish. Through a uat domain. uat.customerName.com

[HrishikeshKa]

Hi @JoelLucuik ,

Without the specific console output, it is difficult to determine the exact cause of the issue. However, there are a few common reasons why tabs may not be clickable on the Tabs component in Edge and Chrome:

1. JavaScript Errors: Check the browser console for any JavaScript errors. If there are any errors related to the Tabs component or its dependencies, it could prevent the tabs from being clickable. Fixing these errors should resolve the issue.

2. CSS Issues: Inspect the Tabs component using the browser's developer tools and check if there are any CSS conflicts or issues that may be affecting the clickability of the tabs. Look for any overlapping elements, incorrect z-index values, or other CSS-related problems.

3. Event Handling: Ensure that the event handling for the tabs is properly implemented. Check if the click event listeners are correctly attached to the tabs and if there are any issues with event propagation or event delegation.

4. Third-Party Libraries: If the Tabs component relies on any third-party libraries or dependencies, make sure they are properly loaded and initialized. Check for any errors or conflicts related to these libraries in the browser console.

5. Browser Compatibility: Verify if the issue is specific to certain versions of Edge and Chrome. It's possible that there may be compatibility issues with the Tabs component or its dependencies in certain browser versions. Try testing the component in different versions of Edge and Chrome to see if the issue persists.

To further investigate the issue, it would be helpful to have the specific console output when the problem occurs. The console output may provide more insights into any errors or warnings that could be causing the tabs to be unclickable.

[joel_at_verb]

1. I included the JS output. This is in UAT so unfortunately it's minified. I will see if we can remove that for now.

2. Because it's intermittent I doubt this is an issue. I'lll ask my team about that.

3. This is my guess. I'll investigate this further. 

4: No third party conflicts unless the error I presented is one. Which is why I posted here in case you knew of issues.

5..: I'll see if I can get a non-minified version of the code deployed.

-Joel

[joel_at_verb]

Appears as if we have two environments running in tandem (new cloud and old on prem). Our dispatcher appears to be allowing a JS call through to old on prem that should have been kept in the cloud.

Once I confirm this I will update this post.

[EstebanBustamante]

Hi, 

You need to click the link where the error is occurring (clienlib-base.lc-....), then add a breakpoint and refresh the page to check why that is not defined. 

Hope this helps.

[joel_at_verb · Accepted solution]

Hi all.

Turns out we had an internal cache that was from a previous version of AEM I had no idea about. We have two sites running in tandem. And the dispatcher sometimes grabs from the old one.

So there was a conflict. We are working on breaking them apart better.

Problem solved. Thanks for the help.

-Joel