data-closeonclick on the sidenav closes menu but leaves the backdrop angularJS

[hsoto92]

I have an angular project where my navbar uses the sidenav plugin for mobile menu, but even though the closeonclick method is set to true, it does close the menu but it still leaves the backdrop on, of course you can click anywhere to dismiss it, however it still is not very UI quality.

Any ideas how to solve this? Below is the markup for my navbar.

<div class="navbar-fixed" ng-controller="navbarAndFooterController" class="ng-hide" ng-hide="navBool">
    <nav>
        <div class="nav-wrapper">
            <a href="#/" class="brand-logo center sofia-font">SC.Catering</a>
            <a href="" data-activates="mobile-nav" data-sidenav="left" data-closeonclick="true" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul id="#" class="right hide-on-med-and-down" id="desktop-nav">
                <li><a href="#/pasteleria_y_reposteria">Pastelería y Repostería</a></li>
                <li><a href="#/dietas_especiales">Dietas Especiales</a></li>
                <li><a href="#/eventos">Eventos</a></li>
                <li><a href="#/catering">Catering</a></li>
                <li><a href="#/summer_camps">Cursos</a></li>
                <li><a href="#/contactame">Contacto</a></li>
            </ul>
            <ul id="#" class="left hide-on-med-and-down">
                <li><a href="https://www.facebook.com/smartcookinghn/" target="_blank"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://twitter.com/smartcooking_hn" target="_blank"><i class="fa fa-twitter"></i></a></li>
                <li><a href="https://instagram.com/sc.catering/" target="_blank"><i class="fa fa-instagram"></i></a></li>
                <!-- <li><a href="#"><i class="fa fa-youtube"></i></a></li> -->
            </ul>
            <ul class="side-nav" id="mobile-nav">
                <li><a href="#/pasteleria_y_reposteria">Pastelería y Repostería</a></li>
                <li><a href="#/dietas_especiales">Dietas Especiales</a></li>
                <li><a href="#/eventos">Eventos</a></li>
                <li><a href="#/catering">Catering</a></li>
                <li><a href="#/summer_camps">Cursos</a></li>
                <li><a href="#/contactame">Contacto</a></li>
                <li><a href="https://www.facebook.com/smartcookinghn/" target="_blank"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://twitter.com/smartcooking_hn" target="_blank"><i class="fa fa-twitter"></i></a></li>
                <li><a href="https://instagram.com/sc.catering/" target="_blank"><i class="fa fa-instagram"></i></a></li>
                <!-- <li><a href="#"><i class="fa fa-youtube"></i></a></li> -->
            </ul>
        </div>
    </nav>
</div>

[JMartinArocha]

I have the same problem.

[webbiesdk]

This sounds like a bug of some-sort, but it might also be you setting things up wrong.

And I couldn't quite see how to replicate the issue, so it would be really helpful if you could provide a link (or a zip) with a page where the issue is present.

[chosa91]

I have the same problem.

Size down the window to x (where x is <992px -by default) then if you open the menu and select a menu item, the item is loaded but the ovarlay didn't disappear. (+feature can be if you add an option [true/false] to wait the wave link animation)

ps.: + a bug (if I open the menu and close/navigate to other menu item in the element inspector I can see a lot of generated div with class="drag-target")

[webbiesdk]

I still can't replicate the problem, but I think i know what you are experiencing.

If one copies the index.html from this repo, there is in the top a side-nav, which initializes first, and therefore sets the options (because of a bug, it was invisible). This side-nav had data-closeonclick="false".

So if one creates another side-nav further down the page, and sets data-closeonclick="true", then closeonclick will still be false.

Unless someone provides a link to a page with the issue (you can use something like this: http://jsfiddle.net/Lvc0u55v/4071/ as a starting point). I will assume that this is what caused the issue, and I will close this at some later point.

@chosa91 The "+ a bug" sounds like a bug in Materialize, and not this library.