Nav-link on "Tabs with nav" doesn't work

[franse]

In Bootstrap tab component, nav-link should be a button as suggested in the Bootstrap Docs:

As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

This doesn’t work:
<a class="nav-link active" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true">Home</a>

It should be like this:
<button class="nav-link active" id="navTabs1_1_tab" data-bs-toggle="tab" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true">Home</button>

[vv-a2007]

But it still seems to be working fine or is it not working for you? Could there be another reason?

<ul class="nav mt-3 mb-3 pb-0 bg-warning bg-opacity-50 text-white nav-justified nav-pills" id="navTabs1_tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true" dmx-on:click="calendar_events.updateSize()">Calendar</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="navTabs1_5_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_5" role="tab" aria-controls="navTabs1_1" aria-selected="true">Riders details</a>
    </li>

[franse]

Hey @vv-a2007 thanks for the reply
It’s not working for me, same case as described on this topic:

Active tab content persists and tab is not active

Not sure if this is a bug or if I’ve done something wrong, but whenever I set up a simple nav + tabcontent (Bootstrap) I have the same 2 problems: If I set a tab pane to show it will be visible on load but it will remain visible until I actively click the relevant nav tab, so if I click a different tab first then both will show Even if I set the nav tab to active, it won’t be displayed as active on load. I need to click it. This video shows it more clearly. Tab A should be active on loa…

Changing from link to button fix the issue for me

[vv-a2007]

Now I have the same problem, everywhere I use Tabs - I have a suspicion that this happened after I switched to the Beta channel and back to Stable. In general, it seems that when switching back, not everything returns to its original state, as for example here it is clearly visible in the interface

No formatters for array type

It looks like this thing doesn’t work normally, first of all, there is no “join” in the list of functions, and when I manually entered the code and it even seemed to work, then when I open it again it’s empty [2] Запись экрана 2024-03-03 в 13.49.52

[franse]

@vv-a2007

Now I have the same problem, everywhere I use Tabs

I saw your topic but I don’t know if it is completely related to this.
The workaround doesn’t work for you?

@vv-a2007

it seems that when switching back, not everything returns to its original state

You can do a force update, maybe that solves some issues…

[vv-a2007]

I meant that perhaps the root cause of the fact that it stopped working lies at some more general level. I hope they find it and fix it. Force update unfortunately did not solve the problem.

And your workaround is if you change to in the code - and you don’t need to change anything else?

[Teodor]

@vv-a2007
Your formatters issue has nothing to do with the issue reported in this topic.

[vv-a2007]

Perhaps it was just a coincidence, but it is suspicious that all the problems appeared at the same time after switching between channels, before that everything worked.

[franse]

It’s not my case @vv-a2007
In this issue it’s enough to add tabs with nav component and won’t work until change the <a> tag and replace it to <button>. Maybe it’s a bootstrap thing.
But do you have something I can try for you?

[vv-a2007]

I followed your advice - replaced with - and it works, thanks

[franse]

Glad it helped my friend

[Teodor]

The issue here is caused by a conflict between the tabs and the bootstrap navigation script, it’s not about using <a> or <button> for the tabs. Using <a> is perfectly fine and not wrong.
This will be fixed in the next update.

[Teodor]

Fixed in Wappler 6.3.2