CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootstrap-vue
RichC
RichC

Reputation: 7879

Bootstrap-Vue NavBar Dropdowns are not automatically closing when clicked

I upgraded Bootstrap-Vue from v2.0.0 RC11 to v2.19.0 and now my dropdowns in the Navbar are not closing automatically after clicking the link? Is there a setting or something I can call to force the dropdowns to close after clicking? I'm using "to" routes instead of "href" if that matters for the links.

enter image description here

    <b-navbar type="light" variant="" toggleable="sm" fixed="top" class="elevate-3 no-print">
        <b-navbar-brand to="/cp/">
            <img v-if="$store.getters.auth.logoUrl" :src="$store.getters.auth.logoUrl" :title="$store.getters.auth.currentGroupName">
            <span v-else style="padding-left:28px;">{{$store.getters.auth.currentGroupName}}</span>
        </b-navbar-brand>
        <b-navbar-toggle target="nav_dropdown_collapse" class="m-2"></b-navbar-toggle>
        <b-collapse is-nav id="nav_dropdown_collapse">
            <b-navbar-nav class="ml-auto">
                <b-nav-item-dropdown :text="route.display" right v-for="(route, i) in permedRoutes" :key="'a-' + i" :class="getRouteClass(permedRoutes.length, route.path)" :title="route.display">
                    <template #button-content>
                        <span>
                            <fa-icon :icon="route.icon" fixed-width />
                            {{ route.display }}
                        </span>
                    </template>
                    <b-link :to="child.path" class="dropdown-item" v-for="(child, i) in route.children" :key="'ac-' + i" :title="child.display">
                        {{ child.display }}
                    </b-link>
                </b-nav-item-dropdown>
                <b-button class="btn-logout m-1 d-none d-sm-block" type="submit" variant="danger" @click="logout"><span class="fas fa-sign-out-alt fa-fw"></span></b-button>
                <b-nav-item class="d-xs-block d-sm-none" title="Sign Out" @click="logout"><span class="fas fa-sign-out-alt fa-fw"></span> Sign Out</b-nav-item>
            </b-navbar-nav>
        </b-collapse>
    </b-navbar>

Upvotes: 0

Views: 2290

Answers (1)

Hiws
Hiws

Reputation: 10354

It's because you're using <b-link> instead of <b-dropdown-item>. <b-dropdown-item> closes the dropdown when clicked.

So if you change <b-link> to <b-dropdown-item> and remove the class="dropdown-item", it should work.

new Vue({
  el: '#app'
})
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>


<div id="app">
  <b-navbar>
     <b-collapse is-nav id="nav_dropdown_collapse">
       <b-navbar-nav class="ml-auto">
         <b-nav-item-dropdown text="This dropdown doesnt work">
           <b-link class="dropdown-item" v-for="i in 3">
             Child {{ i }}
           </b-link>
         </b-nav-item-dropdown>
         <b-nav-item-dropdown text="This dropdown works">
           <b-dropdown-item v-for="i in 3">
             Child {{ i }}
           </b-dropdown-item>
         </b-nav-item-dropdown>
       </b-navbar-nav>
     </b-collapse>
  </b-navbar>
</div>

Upvotes: 2

Related Questions