Can't close dropdown inside a div

Question

This is my situation; I've got a input search. When i click in it, a new div appears under this input. Inside this div (the div it works like a dropdown basically), there's a dropdown button (i'm using uikit as css framework and Angularjs). I created a directive that when a user click inside this div the div stays open, but when a user click outside it, it closes. It's working but i've got a problem right now. Assuming i click the dropdown button, it will open it. What i would is that if i click outside this button, even if i click inside the div, it will close the dropdown. Actually doesn't work. It close everything only if i click outide the "big" div. I know it's difficult to explain but i'm trying to do my best. By the way here's a jsfiddle i've created with the situation: http://jsfiddle.net/8y48q/120/ I post some code:

<div ng-app="myApp">
    <div ng-controller="TestCtrl">      
   <form class="uk-form uk-margin-large">
       <input autocomplete="off"
               data-ng-click="openSearch();"
               style="padding-left: 35px!important;"
               hide-search="hideSearchContainer()"
               data-ng-model="searchText" class="uk-width-1-1" type="search"
               placeholder="Hello">
        <div hide-search="hideSearchContainer()" data-ng-class="{'search-input':userSearch,
                     'search-input-closed':!userSearch}"
                     class="search-input-closed">
          <div class="uk-width-1-3 center-pane">

                            <div class="uk-button-dropdown" title="Click here" data-uk-dropdown="{mode:'click'}">
                                <button type="button" class="uk-button uk-button-primary qt-button-dropdown-material">
                                    <span class="qt-dropdown-text-material">Types</span>
                                </button>

                                <div class="uk-dropdown qt-dropdown uk-dropdown-scrollable" style="">
                                    <ul class="uk-nav uk-nav-dropdown" id="kb_menu">
                                         <li key-navigation ng-repeat="item in items">
                            <a href="">{{item}}</a>
                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
        </div>               

    </form>
    </div>
</div>

here's the controller in Angularjs with the directive

var myApp = angular.module('myApp', []);

myApp.controller('TestCtrl',function($scope){
    $scope.items=['menu item 1','menu item 2'];
    $scope.openSearch = function(){
            $scope.userSearch = true;
        };

  $scope.hideSearchContainer = function(){
    $scope.userSearch = false;
  };
    $scope.itemClicked = function(item, event, index){

    }

    $(document).on('click', '.uk-dropdown', function() {
        $(this).parents('[data-uk-dropdown]:first').removeClass('uk-open');
    });
});

myApp.directive('hideSearch', function($document){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            elem.bind('click', function(e) {
                e.stopPropagation();
            });
            $document.bind('click', function() {
                scope.$apply(attr.hideSearch);
            })
        }
    }
});

Thanks. I am available to provide any other information

Why not just toggle the dropdown? So always you click, you reverse if its seen or not. http://jsfiddle.net/8y48q/122/ But, for a body-click event, you need to give a div the full height to be clickable. — ohboy21, Apr 18 '16 at 13:02
hmm i can't understand if you have changed something in your jsfiddle compared to mine — Atlas91, Apr 18 '16 at 13:07
Sorry, here the new link: http://jsfiddle.net/8y48q/123/ Still there is a problem. Somehow your $document.bind(click) is getting triggered twice. Otherwise it would work. — ohboy21, Apr 18 '16 at 13:10
Also docs says - Add class .uk-dropdown-close to dropdown container or to item to hide dropdown when user click on item. Tried, but not working :/ — cssBlaster21895, Apr 19 '16 at 12:45

score 0 · Answer 1 · answered Sep 23 '16 at 09:32

The problem was e.stopPropagation() in directive. That was preventing all click events of its' child. so I've removed it and add some condition on document.bind and seems working.

Here's script

var myApp = angular.module('myApp', []);

myApp.controller('TestCtrl',function($scope){
    $scope.items=['menu item 1','menu item 2'];
    $scope.openSearch = function(){
            $scope.userSearch = true;
        };

  $scope.hideSearchContainer = function(){
    $scope.userSearch = false;
  };
    $scope.itemClicked = function(item, event, index){

    }
    $(document).on('click', '.uk-dropdown', function() {
        $(this).parents('[data-uk-dropdown]:first').removeClass('uk-open');
    });

});

myApp.directive('hideSearch', function($document){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            elem.bind('click', function(e) {
                //e.stopPropagation();
            });
            $document.bind('click', function(e) {
                if(e.target.className == "uk-notouch")
                   scope.$apply(attr.hideSearch);
            });

        }
    }
});

Can't close dropdown inside a div

1 Answers1