NG Blur on DIV

Question

I am trying to hide the DIV when blurring (focus has been removed from the DIV ). I use angular and bootstrap. So far, I have tried to set the “focus” to the DIV when it is displayed, and then the ng-blur function when the user clicks elsewhere on the screen. This does not work.

Basically the problem is that I cannot focus on my " #lockerBox " via JS, my " hideLocker " function does not work when the focus is assigned to my DIV by clicking it.

 <div class="lock-icon" ng-click="showLocker(result); $event.stopPropagation();"></div> <div ng-show="result.displayLocker" id="lockerBox" ng-click="$event.stopPropagation();" ng-blur="hideLocker(result)" tabindex="1"> $scope.displayLocker = false; $scope.showLocker = function ( result ) { $scope.displayLocker = !$scope.displayLocker; node.displayLocker = $scope.displayLocker; function setFocus() { angular.element( document.querySelector( '#lockerBox' ) ).addClass('focus'); } $timeout(setFocus, 100); }; $scope.hideLocker = function ( node ) { $scope.displayLocker = false; node.displayLocker = $scope.displayLocker; }; 

Answer 1

Just add tabindex="-1" attr to the div , it gives it the same as input -

 <div tabindex="-1" ng-blur="onBlur()"></div> 

https://jsfiddle.net/ast12nLf/1/

(Inspired here - stack overflow.site/questions/702017 / ... )

Answer 2

In the end, I just set the blur event to an element that has onclick.

Answer 3

Even I had the same problem - but it was able to resolve it with the "mouseup" event on the entire document in the user directive following the code where I switch the accordion contained in the div as a popup using ng-show () = "variable" now this variable is the key here, through the button for switching the menu items HTML Element, div pop up HTML Element and a custom directive for processing the mouse!

 var dummyDirective = angular.module(dummyDirective, []); dummyDirective.directive('hideOnMouseUpElsewhere', function() { return { restrict: 'A', link: function(scope, element, attr) { $(document).mouseup(function(e) { var container = $(element); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0 && scope.status.menuVisible // ... nor a descendant of the container && !(e.target.id === attr.excludeClick)) // do not execute when clicked on this { scope.status.menuVisible = false; scope.$apply(); } }); } } }) 

where in the container there will be a DOM element to which you applied the hideOnMouseUpElsewhere directive along with the added excludeClick attribute, and e.target is the one DOM element in which you click

Below is the HTML code for the accrodian bootstrap angular popup menu:

 <a id="MenuAnchor" href="" data-toggle="dropdown" class="dropdown-toggle" ng-click="status.menuVisible = !status.menuVisible;"> <i id= "MenuIcon" class="glyphicon glyphicon-cog" style="font-size:20px; color: #428bca; cursor:pointer;"></i> </a> <div id ="MenuPane" ng-blur="status.menuVisible=false;" hide-on-mouse-up-elsewhere exclude-click='MenuIcon'> <div class="btn-group favoritesMenu" style="width: 300px;" ng-show="status.menuVisible" > <accordion close-others="true"> <accordion-group > <accordion-heading>....</accordion-heading> <div ng-click="status.menuVisible=false;">Data</div> </accordion-group> </accordion>