md-fab-toolbar: ng-click not working with IE 11 on md-fab-actions

[alexitooi]

Codepen: http://codepen.io/anon/pen/mVGPqb?editors=1111
Angular 1.3.19
Angular Material: 1.0.4

With chrome a click on the md-button inside the md-fab-actions is working. On IE11 the click is not working (see console log in codepen...)

Any workaround possible?

Cheers,
Alex

[svmmym]

+1

[topherfangio]

Is there a reason you are putting the ng-click on the nested <div>? Try putting it directly on the md-button instead; this seems to work.

[svmmym]

this didn't solve the problem for me. if i put the ng-click on the md-button in the codepen above, the ng-click is still not working on IE11.

[alexitooi]

@topherfangio neither it is working for me with ng-click on the md-button with IE11

[topherfangio]

I must admit, I am a bit confused as this did work for me on IE11 on Windows 10 when I edited the supplied Codepen and moved the ng-click.

@samesame @alexitooi Can you two provide a bit more information about what versions of IE/Windows you are using so we can track this down? Is this perhaps touch-related or is it actually desktop clicks?

[alexitooi]

Hi @topherfangio , to clarify Win10 IE11 click on button working, on Win7 IE11 click not working ;) (Version 11.0.9600.17420)

[topherfangio]

@alexitooi Bah! Good to know that the same browser (IE11) doesn't work the same on different versions of the same OS. We'll look into it; just need to find someone running Win7 so we can debug :-)

[alexitooi]

https://dev.windows.com/en-us/microsoft-edge/tools/vms/mac/ could help ;-)

[david-gang]

I also have this problem. @topherfangio just to complement the knowledge about the ie versions. Their versions are different. https://en.wikipedia.org/wiki/Internet_Explorer_11

In windows 7 the latest version is 11.0.9600.17843[ and in windows 10 the latest version is 11.0.10240.16384 so technically they are different :-)

The problem is also visible in the toolbar demo: https://material.angularjs.org/latest/demo/fabToolbar
When the fab is opened, and you press a button. In other browsers there is a small white circle while here in ie there is no white circle.

[rhumbus]

The root of the problem here stems in the particular CSS propery that is added to the actions toolbar when open.

If you look in fabToolbar.js, line 138:
toolbarElement.style.pointerEvents = 'initial';
The md-toolbar element is targeted to receive the css property pointer-events with the value initial upon opening the fab-toolbar. It seems that Explorer (the above mentioned versions) doesn't recognize the value initial, at least not via javascript, and therefore not altering that property - so the property remains as defined in the closed state of the fab-toolbar, which is none. This causes the md-toolbar to block pointer events down to its children.

Furthermore, as pointed to me by david-gang, the value 'initial' is not part of the specs for 'pointer-events'.

Changing the value to auto solves the problem:
toolbarElement.style.pointerEvents = 'auto';

[topherfangio]

@rhumbus Thanks for taking the time to track this down some more! Can you do a quick test and see if changing it to auto works on the other browsers as well? For some reason, I was thinking I had auto and switched it to initial, but that was so long ago that I don't remember.

If that works, would be be willing to submit a PR so that we can get it merged/fixed?

[alexitooi]

thx @david-gang @topherfangio 👍