ng-focus and ng-blur does not work on <button> element under Safari and FF browsers

[Kamilius]

Can't get ng-focus and ng-blur directives working on button element under Safari and FF browsers.

Here is an example to visually reproduce this issue:

<div ng-app ng-init="focus=false;blur=false;active=false">
  <button
    tabindex="1" 
    ng-class="{ myFocus: focus, myBlur: blur }"    
    ng-focus="focus=true;blur=false;" 
    ng-blur="blur=true;focus=false;"
    value="Click me"
  >
    Click me
  </button>

  <p>focus: {{focus}}</p>
  <p>blur: {{blur}} </p>
</div>

Working example from above can be found here:
http://jsfiddle.net/UTn5y/1196/

Generally using this approach to write a dropdown. Button is used as dropdown list toggle.

[Narretz]

Works for me in FF. Which version are you using?

[Kamilius]

@Narretz was under 42, but now updated to 43.0.4. Still doesn't work under FF MacOS

[Narretz]

Then it's probably a MacOs thing ...

[Narretz]

See https://gist.github.com/cvrebert/68659d0333a578d75372

So it looks like FF and Safari have independent bugs, because it works in Chrome.

Would you like to open bugs for Safari and FF about this?

[Kamilius]

@Narretz I believe I do, if there are none regarding this issue. Thanks for help then.

[swarndeepkumar]

@Narretz Are you still facing same issue in FF ?

[pidj]

Personnally, I'm still facing the issue under Safari 11.1 on macOS High Sierra... :/