Tab content bug in Wappler 6.5

Wappler General Bugs
#1

Wappler Version : 6.5
Operating System : Mac apple silicon
Server Model:
Database Type: node.ja
Hosting Type:

Expected behavior

When a button controlling Tab content is pressed, the current Tab Pane should be hidden
and the new one should be shown.

…YOUR TEXT HERE …

Actual behavior

In 6.5 when on the first button click, the second Tab pane simply ends up below the current
tab pane. On subsequent clicks the first Tab pane will be hidden as expected.

…YOUR TEXT HERE …

How to reproduce

  • add a nav to the page, insert two buttons
  • add a tab content to the page.
  • set button action toggle to Tab and select tabs accordingly
  • click tab button number two to switch tab pane

…YOUR TEXT HERE …

<div class="d-flex flex-column">
    <div class="nav w-100"><button id="btn3" class="btn" data-bs-toggle="tab" data-bs-target="#tabContent1_1">Button</button>
        <button id="btn4" class="btn" data-bs-toggle="tab" data-bs-target="#tabContent1_2">Button</button>
    </div>
    <div class="tab-content" id="tabContent1">
        <div class="tab-pane fade show active" id="tabContent1_1" role="tabpanel">
            <p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
        </div>
        <div class="tab-pane fade" id="tabContent1_2" role="tabpanel">
            <p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
        </div>
        <div class="tab-pane fade" id="tabContent1_3" role="tabpanel">
            <p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
        </div>
    </div>


</div>
#2

I had a similar issue with tabs, on one page they worked fine and on another the exact same problem as you. My setup is different in that I don’t use buttons just the standard TabswithNav element.

For some reason the tabs that didn’t work were missing href="#" from the nav-item, adding those fixed the issues for me.

#3

Have you edited the way you’re calling the tabs?

#4

@elpod Interesting. I might go back and check if that changed after updating to 6.5. There was a number of things that broke for me with the update so I didn’t have time to dig too deep and simply switched to show tabs based on a variable. It also solved an issue where the BS5 CSS wrecked havoc on buttons controlling tabs anyway.

@franse You might have had a different issue there? The buttons in my example are inside a nav element. And they do control the tabs. The issue I’m facing is that the first tab you switch to will simply show without hiding the current tab, stacking them on top of each other, on subsequent tab switching everything works as expected.

#5

I just realised I neglected to mention in the ticket, the tab set up was working in Wappler 5.6 without any issues. This behaviour cropped up after updating to 6.5 (without any changes to the tabs on my part).

#6

Yes but not inside nav-tab

What if you change:
class="nav w-100"
To:
class="nav w-100 nav-tabs"