Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-133018

frontend-js-tabs-support-web doesn't render tab after a cycle

    Details

      Description

      From Liferay Community Slack: https://liferay-community.slack.com/archives/CB2QQ3M5F/p1621932150018100

      There is an issue when using data-toggle="liferay-tab" , the content of the tabs just disappears when switching rapidly.

      Put the tab markup

      <ul class="nav nav-underline" id="navChangeTest" role="tablist">
          <li class="nav-item">
              <a aria-controls="tab1" aria-selected="true" class="active nav-link" data-toggle="liferay-tab" href="#tab1" id="test1Tab" role="tab">Tab1</a>
          </li>
          <li class="nav-item">
              <a aria-controls="tab2" class="nav-link" data-toggle="liferay-tab" href="#tab2" id="test2Tab" role="tab">Tab2</a>
          </li>
          <li class="nav-item">
              <a aria-controls="tab3" class="nav-link" data-toggle="liferay-tab" href="#tab3" id="test3Tab" role="tab">Tab3</a>
          </li>
      </ul>
      <div class="tab-content" id="navTabContents">
          <div aria-labelledby="test1Tab" class="active show fade tab-pane" id="tab1" role="tabpanel">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </div>
          <div aria-labelledby="test2Tab" class="fade tab-pane" id="tab2" role="tabpanel">
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
          </div>
          <div aria-labelledby="test3Tab" class="fade tab-pane" id="tab3" role="tabpanel"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
          </div>
      </div>
      

      on the page. Click Tab2, Tab3, Tab2, Tab1. The tab-pane doesn't show.

       

        Attachments

          Activity

            People

            Assignee:
            team-frontend-infra Product Team Frontend Infrastructure
            Reporter:
            patrick.yeo Patrick Yeo
            Participants of an Issue:
            Recent user:
            Rafaela Nascimento
            Engineering Assignee:
            Patrick Yeo
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Days since last comment:
              12 weeks, 2 days ago

                Packages

                Version Package
                7.4.2 CE GA3 DXP 7,4
                Master