Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs block not being detected properly.

See original GitHub issue

Hi,

I am doing some tests with the Tabs block and I noticed an issue.

When I drag and drop it in the canvas, this is the code I see when I inspect it.

<div data-gjs-type="tabs" data-highlightable="1" id="ivkdl" class="gjs-comp-selected">
   <ul data-gjs-type="tabs-navigation" data-highlightable="1" role="tablist" class="nav nav-tabs" id="i145a">
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="i5mso"><a data-gjs-type="link" data-highlightable="1" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a></li>
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="iv1zw"><a data-gjs-type="link" data-highlightable="1" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a></li>
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="ie8bw"><a data-gjs-type="link" data-highlightable="1" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a></li>
   </ul>
   <div data-gjs-type="tabs-panes" data-highlightable="1" class="tab-content" id="idfrp">
      <div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
      <div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
      <div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
   </div>
</div>

When I call editor.getHtml(), I get the following:

<div id="ivkdl">
   <ul role="tablist" class="nav nav-tabs">
      <li class="nav-item"><a id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a></li>
      <li class="nav-item"><a id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a></li>
      <li class="nav-item"><a id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a></li>
   </ul>
   <div class="tab-content">
      <div id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
      <div id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
      <div id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
   </div>
</div>

When I pass that in the value configuration on my editor and wait for it to load.

I get the following code when I inspect the canvas again:

<div data-gjs-type="div" data-highlightable="1" id="ivkdl">
   <ul data-gjs-type="tabs-navigation" data-highlightable="1" role="tablist" class="nav nav-tabs" id="insrq">
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="iofw8"><a data-gjs-type="link" data-highlightable="1" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a></li>
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="il57x"><a data-gjs-type="link" data-highlightable="1" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a></li>
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="i0w4h"><a data-gjs-type="link" data-highlightable="1" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a></li>
   </ul>
   <div data-gjs-type="div" data-highlightable="1" class="tab-content" id="iqv49">
      <div data-gjs-type="div" data-highlightable="1" id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
      <div data-gjs-type="div" data-highlightable="1" id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
      <div data-gjs-type="div" data-highlightable="1" id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
   </div>
</div>

As you can see upon inspection, we seem to have lost the data-gjs-type tabs and tabs-panes and tabs-tabs-panes, they all have converted to div.

This causes an issue because when I want to edit the tabs again, I can no longer click on the tab to display the content for each tab itself.

I am not sure if you can reproduce this on your end?

Issue Analytics

State:
Created 5 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

simplecommercecommented, Mar 17, 2019

I saw your post in GrapesJS, hopefully we will get an answer.

Here is my post in regards to the ID changing, I was able to patch mine, but I hope they will give a better way to handle it.

https://github.com/artf/grapesjs/issues/1875

1reaction

kaoz70commented, Mar 6, 2019

Hey! Let me check that out, I was going to resolve some tab issues today anyway.

Top Results From Across the Web

Issues for Block Tabs | Drupal.org

Title Status Priority View Arguments not working in Block Tabs Closed (fixed) Normal Fix phpcs (Code Sniffer) coding standards Reviewed & tested by the community...

Tabs and indents settings does not work

Go to Settings and change indentation to Tab; Go back to file and press Enter so it creates new line (e.g. after opening...

Various issues in the gutenberg editor and the CSS of the ...

The Tab Block is very buggy and even after your update, it still doesnt fucntion properly. We have a lot of content made...

Tabs, panels, or other controls are missing from the ribbon in ...

One or more tabs, panels, or other controls do not show on the ribbon in AutoCAD.

Block or allow pop-ups in Chrome - Computer - Google Support

By default, Google Chrome blocks pop-ups from automatically showing up on your screen. When a pop-up is blocked, the address bar will be...