Bootstrap 4 navbar dropdown menu item not clickable on mobile devices

Question

I've got a website being developed with Bootstrap 4. When viewing from a mobile device and the menu items have collapsed to the 3 bars, the menu items are not clickable. I've tried implementing it the way the bootstrap docs suggest, but it's still not working. I've tried some other tweaks to no avail.

What am I doing wrong here (other than using the alpha version)?

Here's the site where you can test it: http://www.wrestlestat.com

Keep in mind, if you just resize your browser from a desktop to the mobile size, everything works fine, it only doesn't work when viewing from a mobile device.

Here's the code for the navigation menus:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsemenus">
                ☰
            </button>
            <a href="/" class="navbar-brand">
                <img alt="WrestleStat" src="/images/WrestleStat.png" height="35" asp-append-version="true" />
            </a>
        </div>
        <div id="collapsemenus" class="collapse navbar-toggleable-xs">
            <ul class="nav navbar-nav">
                <li class="nav-item m-l-1 hidden-xs-down">
                    <a class="nav-link donate" type="button">Donate</a>
                </li>
                <li class="nav-item hidden-sm-up">
                    <a class="nav-link donate" type="button">Donate</a>
                </li>
                <li class="nav-item">
                    <a href="/team/select" class="nav-link" type="button">Teams</a>
                </li>
                <li class="nav-item btn-group">
                    <a class="dropdown-toggle nav-link" type="button" id="dropdown1" data-toggle="dropdown">Fantasy</a>
                    <div class="dropdown-menu background-black">
                        <a href="#" class="dropdown-item">Pick'Em</a>
                        <!--/fantasy/thisweek-->
                        <a href="#" class="dropdown-item">Tourney Pool</a>
                        <!--/tourneypool/main-->
                    </div>
                </li>
                <li class="nav-item btn-group">
                    <a class="dropdown-toggle nav-link" type="button" id="dropdown2" data-toggle="dropdown">Compare</a>
                    <div class="dropdown-menu background-black">
                        <a href="/compare/dual" class="dropdown-item">Dual Lineup</a>
                        <a href="/compare/wrestler" class="dropdown-item">Wrestlers</a>
                    </div>
                </li>
                <li class="nav-item btn-group">
                    <a class="dropdown-toggle nav-link" type="button" id="dropdown3" data-toggle="dropdown">Rankings</a>
                    <div class="dropdown-menu background-black">
                        <a href="/rankings/wrestler" class="dropdown-item">Wrestlers</a>
                        <a href="/rankings/weight/125" class="dropdown-item p-l-3 hidden-sm-down">125</a>
                        <a href="/rankings/weight/133" class="dropdown-item p-l-3 hidden-sm-down">133</a>
                        <a href="/rankings/weight/141" class="dropdown-item p-l-3 hidden-sm-down">141</a>
                        <a href="/rankings/weight/149" class="dropdown-item p-l-3 hidden-sm-down">149</a>
                        <a href="/rankings/weight/157" class="dropdown-item p-l-3 hidden-sm-down">157</a>
                        <a href="/rankings/weight/165" class="dropdown-item p-l-3 hidden-sm-down">165</a>
                        <a href="/rankings/weight/174" class="dropdown-item p-l-3 hidden-sm-down">174</a>
                        <a href="/rankings/weight/184" class="dropdown-item p-l-3 hidden-sm-down">184</a>
                        <a href="/rankings/weight/197" class="dropdown-item p-l-3 hidden-sm-down">197</a>
                        <a href="/rankings/weight/285" class="dropdown-item p-l-3 hidden-sm-down">285</a>
                        <div class="dropdown-divider hidden-xs-down"></div>
                        <a href="/rankings/dual" class="dropdown-item">Dual Team</a>
                        <a href="/rankings/tournament" class="dropdown-item">Tournament Team</a>
                        <div class="dropdown-divider hidden-xs-down"></div>
                        <a href="#" class="dropdown-item">Statistical</a>
                    </div>
                </li>
                <li class="nav-item btn-group">
                    <a class="dropdown-toggle nav-link" type="button" id="dropdown4" data-toggle="dropdown">Profile</a>
                    <div class="dropdown-menu background-black">
                        <a href="/account/login" class="dropdown-item">Login</a>
                        <a href="/account/register" class="dropdown-item">Register</a>
                        <a href="/account/forgotpassword" class="dropdown-item">Forgot Password</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Here's a bootply, but probably doesn't do much good since it must be on a mobile device to not work.

http://www.bootply.com/9Z9oycwCSh

Solution

I found out that this was NOT a bug with Bootstrap 4. It was a flaw in how I was configuring my dropdown anchor element. Here's the corrected version:

<a class="dropdown-toggle nav-link" href="#" role="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rankings</a>

The differences are:

1. Removed type="button"
2. Added href="#"
3. Added role="button"
4. Added aria-haspopup="true"
5. Added aria-expanded="false"

Those 5 things fixed my problem.

Comments

[Polyov]

Tested using Chrome's display-as-mobile and my Android's Chrome, can't reproduce. All the links work fine.

[ganders]

@Polyov Right, because it works just fine from a desktop machine. It only stops working when you run from a mobile device (I'm testing with iPhone). Doesn't matter if I run Safari or Chrome on iPhone.

[Robert]

You may wish to reference github.com/twbs/bootstrap/issues/17532 as it discusses Bootstrap 4 and issues related to the navbar properly handling dropdown menus. TLDR of it sounds like 4 (which is an alpha that is not suitable for live sites) doesn't support this combination quite yet.

[ganders]

Any workarounds until this is fixed in the next alpha/beta release?