Bootstrap Dropdown events not firing

[Walid-Abdulrazik]

I added an event listener to the bootstrap dropdown of the navbar but no dropdown events are firing at all

        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown" id="myNavBarSearchDropdownParent">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Search <b class="caret"></b></a>

                <div class="dropdown-menu">
                    <div class="container">
                        <form class="form-inline d-flex flex-nowrap mx-2">
                            <div class="form-group">
                                <input type="search" class="form-control mx-1" id="myNavBarSearchDropdownInput" placeholder="Search" aria-label="Search">
                            </div>
                            <button type="submit" class="btn btn-outline-secondary mx-1"><i class="fa fa-search"></i>Search</button>
                        </form>
                    </div>
                </div>
            </li>
        </ul>

const myNavBarSearchDropdown = document.getElementById('myNavBarSearchDropdownParent')
myNavBarSearchDropdown.addEventListener('show.bs.dropdown', event => {
    setTimeout(function () { document.getElementById('myNavBarSearchDropdownInput').focus() }, 100);
})

and it is not a Bootstrap library issue ..

Does anyone know what is going on and how to fix this ?

Complete project link https://drive.google.com/file/d/1tMLlEUnnm-R2-RuK9PjtnP4834fwVsc5/view?usp=sharing

[RolandGuijt]

Please refer to the support options for Bootstrap since this is the issue tracker for Duende products.