NgBlur not firing in Internet explorer

Question

I have a simple dropdown which shows when a button is clicked and hides when a button in dropdown is clicked or user click everywhere else on the page. Code is working in chrome but not in IE. It is looking like ng-blur event on the section is never firing in ie

I'm using IE11 and AngularJS 1.2.3. Code is working fine in Chrome.

// some other html here
<section tabindex="0" ng-blur="menu.isOpen=false"> // main section
    <div ng-click="toggle()">
        <div>button</div>  //button opening  dropdown
    </div>
    <div ng-show="menu.isOpen">
       <div>
           <ul>
                <li name="Sign Off" ng-click="toggle()">Sign off</li>
           </ul>
       </div>
    </div>
</section>
// here rest of page

toggle() method is simple:

menu.isOpen=!menu.isOpen;

UPDATE:

after even more investigation I know that that section never get focus so it never get blur. It is somehow hidden under the divs inside him. Setting z-index:1500 didn't helped.

Answer 1

According to angularjs source code, ng-blur is meant to be used on the following elements:

window, input, select, textarea, a

Maybe you could replace 'section' by 'a' and try again in ie11?

The 'a' css can be configured with a style attribute.

Answer 2

Tabinidex should solve the issue. For it to work, every element that contains the tabindex attribute should have a secuential unique number greather than 0.

In your case I will assume is not working due to you are using tabindex=0. If you switch it to 1 it may work if you don´t have other element with tabindex=1 anywhere else in the code.

We faced the same issue, and what worked for us was to use the tabindex attribute as 1 in the body, and removing all tabindex attributes from our elements containing ng-blur.

For more information: tabindex