Dropdowns do not autoClose

Topic: Dropdowns do not autoClose

rl pro asked 6 years ago

Hi,

- downloaded mdb-angular-pro-4.3.5.zip, unzipped, npm i
- src/app/app.component.html changed to:

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
 
 <!-- Navbar brand -->
 <logo><a class="navbar-brand" href="#">Navbar</a></logo>

<!-- Collapsible content -->
 <links>

<!-- Links -->
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius>Features</a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>
 </li>

<!-- Dropdown -->
 <li class="nav-item dropdown" dropdown>
 <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
 Basic dropdown<span class="caret"></span></a>
 <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
 <div class="divider dropdown-divider"></div>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
 </div>
 </li>

<!-- Dropdown -->
 <li class="nav-item dropdown" dropdown>
 <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
 Basic dropdown<span class="caret"></span></a>
 <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
 <div class="divider dropdown-divider"></div>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
 </div>
 </li>

</ul>
 <!-- Links -->

<!-- Search form -->
 <form class="form-inline waves-light" mdbRippleRadius>
 <input class="form-control mr-sm-2" type="text" placeholder="Search">
 </form>
 </links>
 <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

(this is the same code as here, with doubled "Basic dropdown" nav-item)

And now, when I open any dropdown menu, this dropdown do not (auto)close when I click any other nav-item, when I enter the search input box and even when I open the other dropdown, the first one remains still open. What to do to make the dropdowns realy autoclosable?

Thanks,
Radek

Add comment

Adrian Sawicki free answered 6 years ago

0 2 Best answer

Hello,

We know about this issue and we are going to fix it. Temporary solution for it:
<pre><mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark bg-pink scrolling-navbar" [containerInside]="false">
 <logo>
 <a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
 </logo>
 <links>
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active waves-light" mdbRippleRadius>
 <a class="nav-link">Home <span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link">Features</a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link">Pricing</a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link">Opinions</a>
 </li>
 <li>
 <div class="btn-group nav-item dropdown" dropdown>
 <a dropdownToggle class="nav-link dropdown-toggle waves-light">
 Button dropdown <span class="caret"></span>
 </a>
 <div class="dropdown-menu dropdown-primary">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </div>
 </li>
 <li>
 <div class="btn-group nav-item dropdown" dropdown>
 <a dropdownToggle class="nav-link dropdown-toggle waves-light">
 Button dropdown <span class="caret"></span>
 </a>

<div *dropdownMenu class="dropdown-menu dropdown-secondary dropdown" role="menu">
 <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
 <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
 <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
 <li class="divider dropdown-divider"></li>
 <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
 </li>
 </div>

</div>
 </li>
 </ul>
 <ul class="navbar-nav nav-flex-icons">
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link"><i class="fa fa-facebook"></i></a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link"><i class="fa fa-twitter"></i></a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link"><i class="fa fa-instagram"></i></a>
 </li>
 </ul>
 </links>
</mdb-navbar>

<main>
 <div class="container" style="height:1300px;">
 <div class="row mt-5 pt-5">
 <div class="col text-center">
 <h2>This Navbar is fixed</h2>
 <h5>It will always stay visible on the top, even when you scroll down</h5>
 <br>
 <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
 </div>
 </div>
 </div>
</main>
</pre>

Please insert min. 20 characters.

Hello, We know about this issue and we are going to fix it. Temporary solution for it:

<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark bg-pink scrolling-navbar" [containerInside]="false">
 <logo>
 <a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
 </logo>
 <links>
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active waves-light" mdbRippleRadius>
 <a class="nav-link">Home <span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link">Features</a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link">Pricing</a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link">Opinions</a>
 </li>
 <li>
 <div class="btn-group nav-item dropdown" dropdown>
 <a dropdownToggle class="nav-link dropdown-toggle waves-light">
 Button dropdown <span class="caret"></span>
 </a>
 <div class="dropdown-menu dropdown-primary">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </div>
 </li>
 <li>
 <div class="btn-group nav-item dropdown" dropdown>
 <a dropdownToggle class="nav-link dropdown-toggle waves-light">
 Button dropdown <span class="caret"></span>
 </a>

<div *dropdownMenu class="dropdown-menu dropdown-secondary dropdown" role="menu">
 <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
 <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
 <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
 <li class="divider dropdown-divider"></li>
 <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
 </li>
 </div>

</div>
 </li>
 </ul>
 <ul class="navbar-nav nav-flex-icons">
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link"><i class="fa fa-facebook"></i></a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link"><i class="fa fa-twitter"></i></a>
 </li>
 <li class="nav-item waves-light" mdbRippleRadius>
 <a class="nav-link"><i class="fa fa-instagram"></i></a>
 </li>
 </ul>
 </links>
</mdb-navbar>
<!-- Main -->
<main>
 <div class="container" style="height:1300px;">
 <div class="row mt-5 pt-5">
 <div class="col text-center">
 <h2>This Navbar is fixed</h2>
 <h5>It will always stay visible on the top, even when you scroll down</h5>
 <br>
 <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
 </div>
 </div>
 </div>
</main>
<!-- /.Main -->

rl pro commented 6 years ago

Hi, thanks for answer. Works when opening another dropdown, but remains open when clicking another menu item, including search form. But ok, I have found another workaround and will wait for the fix - any time estimation? Radek

Adrian Sawicki free commented 6 years ago

We're gathering everything now so it's hard to tell.

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

rl

Pro User 12Support score
5Questions 3Answers 0Snippets