Dropdown menu wont stay open bootstrap 4

Question

I am currently having issues with my dropdown menus. I would like them to only open/close when the dropdown menu is clicked, not the list items or anywhere else in the body.

Here is my code that I am having the issues with:

 <main>
    <div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li>
                    <span style="height:50px" />
                </li>
                <li class="dropdown" id="mi1">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Service Provision<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Service Provision<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Automation Requests<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">NMC<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Customers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Contractors<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Suppliers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Site Access<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Site Access<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Key Issue<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
            </ul>
            <div class="dropup">
                <a id="menu-toggle-reversed" href="#" class="dropdown-toggle dropup" data-toggle="dropdown"><i id="adminIconPadding" class="fa fa-user-md"></i>Admin<span class="fa fa-chevron-up pull-right sideMenuChevronsDropUp"></span></a>
                <ul id="adminDropup" class="dropdown-menu" role="menu">
                    <li><a href="#">Settings<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                </ul>
            </div>
        </div>

I have tried adding inline javascript to "stopPropagation" however this has resulted in the dropdown menu not opening at all.

Here is a rough jsfiddle of what is happening with the dropdown menus in the left navigation bar: https://jsfiddle.net/jr_iridium/aqLa77ax/

I'm relatively new to bootstrap so please let me know if I have made any mistakes.

Thanks in advance.

Answer 1

Here is my answer, after long testing since I used to with Boostrap 3. By removing the data-toggle="dropdown" is the only way to remove auto close during outside clicks. Related to here but your question is Bootstrap 4

Try this:

https://jsfiddle.net/rigz/pdc4un6L/5/

If the fiddle doesn't work just let me know, I'm having weird issue in fiddle since I'm under corporate proxy posting this :P