Possible Bug in shown-bs-tab Event

Wappler Version : 7.4.2
Operating System : Mac
Server Model: Node
Database Type: MySQL

Expected behavior

What do you think should happen?

when a navigation tab is clicked the dmx-on:shown-bs-tab dynamic event should fire. I noticed today that a production implementation that populated query parameters when a tab was shown for ease of navigation and linking was no longer working.

Actual behavior

At the moment the shown-bs-tab event appear to be ignored (in testing it appears show-bs-tab is also ignored)

How to reproduce

I created this simple example to reproduce. I’m not seeing any console errors, but the event is not firing in my project when the tab is shown.

<div class="container">
        <div class="row">
            <div class="col">
                <ul class="nav nav-tabs" 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-class:active="true" dmx-on:shown-bs-tab="notifies1.info('tab 1 shown')">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="navTabs1_2_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_2" role="tab" aria-controls="navTabs1_2" aria-selected="false">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="navTabs1_3_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_3" role="tab" aria-controls="navTabs1_3" aria-selected="false">Messages</a>
                    </li>
                </ul>
                <div class="tab-content" id="navTabs1_content">
                    <div class="tab-pane fade show active" id="navTabs1_1" role="tabpanel">
                        <p>Tab 1</p>
                    </div>
                    <div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
                        <p>Tab 2</p>
                    </div>
                    <div class="tab-pane fade" id="navTabs1_3" role="tabpanel">
                        <p>Tab 3</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Please test this update: dmxAppConnect.js.zip (134.7 KB)

This seems to have fixed the issue! It also appears to fix a similar issue with the shown-bs-modal and hidden-bs-modal not firing, which I had observed but didn’t get around to reporting. Thanks.

Yes, that were all the same issue and should be fixed with this update.

1 Like

Could this be the same issue?

On modal hide/hidden, the form does not reset - Wappler General / Bugs - Wappler Community

Fixed in Wappler 7.5.1