tabs not clickable on tabs component on edge and Chrome | Community
Skip to main content
J
JoelLucuik
Level 3
May 21, 2024
Solved

tabs not clickable on tabs component on edge and Chrome

  • May 21, 2024
  • 3 replies
  • 1833 views

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:

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by joel_at_verb

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

 

 

3 replies

gkalyan
Community Advisor and Adobe Champion
gkalyanCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
May 21, 2024

@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?

 

 

    J
    joel_at_verb
    Level 2
    May 21, 2024

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

      HrishikeshKagne
      Community Advisor
      HrishikeshKagneCommunity Advisor
      Community Advisor
      May 22, 2024

      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.

      Hrishikesh Kagane
        J
        joel_at_verb
        Level 2
        May 22, 2024

        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

         

         

         

          J
          joel_at_verb
          Level 2
          May 22, 2024

          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
            Community Advisor and Adobe Champion
            EstebanBustamanteCommunity Advisor and Adobe Champion
            Community Advisor and Adobe Champion
            May 22, 2024

            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.

            Esteban Bustamante
              J
              joel_at_verbAccepted solution
              Level 2
              May 26, 2024

              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

               

               

                Terms & ConditionsAccessibility statement

                Loading footer...