ng-mouseleave triggers with select open on firefox, not on chrome

[Brian]

Hey guys,

I have a DIV that has a default state (normal and ng-mouseleave), and a mouse-enter state (ng-mouseenter)

It was working perfectly on chrome, but then I tested on firefox :( ... If you have a SELECT, and the popup goes outside of the element bounds, it triggers the ng-mouseleave in firefox, but in chrome the mouseleave is only triggered when the popup is closed.

Here is an example: http://plnkr.co/edit/fs543wtKIMgSOsplajp6?p=preview
If you try to select 3 on Firefox you need to use keyboard :(

I guess this is not specifically an angular issue, but rather how the browser handles events, so my question is more: How can I achieve the chrome behavior for firefox using angular (or whatever)?

Thanks,

Brian

[Sander Elias]

Hi brian,

do it like this:

    <div style='border-style: solid; width: 150px'  ng-mouseenter='minimized = false' >

      <div ng-show='minimized'>
        Minimized
      </div>
      <div ng-hide='minimized' >
        <select ng-mouseleave='minimized = true'>
          <option>bla1</option>
          <option>bla2</option>
          <option>bla3</option>
        </select>
      </div>
    </div>

You have to switch to ng-hide/show to make this work. ngIf creates a new scope, and your use of scope variables does not work then.

Regards

Sander

[Brian]

Hey Sanders, Thanks, I forgot I even posted this!
Works good.