Disabled button is clickable on Edge browser

Question

I have problem with Edge browser. In my web site I have buttons with span tags inside them. In this span tags I bind text and icons. So far I had no problem but on Edge browser it is possible to click on disabled buttons. After investigating problem I found out that, when button contains span tags inside, it is possible to click on button. Here is how it looks on my web site:

<button id="btnRefresh" type="button" class="btn btn-primary" ng-click="refresh()" ng-disabled="performingAction">
    <span ng-class="performingAction && action == 'refresh' ? 'fa fa-cog fa-spin' :'fa fa-refresh'"></span>
    <span>{{ refresh }}</span>
</button>

Here is example to testing:

<button type="button" disabled="disabled" onclick='alert("test");'>
    <span>Click me!</span>
</button>

One option would be to hide buttons instead of disabling, but I prefer to disable them. Please suggest solution to over come this issue.

This appears to be a bug. I've logged it here: https://connect.microsoft.com/IE/feedback/details/1748050 — Ryan Joy, Sep 03 '15 at 14:48
I'm voting to close this question as off-topic because this is a bug in Microsoft Edge — Popnoodles, Sep 03 '15 at 16:08
@Popnoodles: That does not make the question off-topic. It's on-topic, the answer being "It's a bug". See e.g. http://meta.stackoverflow.com/questions/268242/how-to-mark-a-fixed-problem for a meta discussion. — sleske, Oct 27 '15 at 15:07
@sleske yes but you don't get enough options. The closest may be "Offtopic because... Questions about general computing hardware and software are off-topic for Stack Overflow unless they directly involve tools used primarily for programming. You may be able to get help on Super User." — Popnoodles, Nov 02 '15 at 01:19

score 5 · Answer 1 · edited Apr 12 '18 at 11:48

5

Just set

pointer-events: none;

for disabled buttons.

Here's CSS to disable all disabled elements everywhere:

*[disabled] {
    pointer-events: none !important;
}

pointer-events documentation

edited Apr 12 '18 at 11:48

Ivan Rubinson

3,001
4
19
48

answered Dec 22 '15 at 13:36

Ikhtiyor

819
6
8

Excellent! Why do it in Javascript if it can be done in CSS? – Ivan Rubinson Apr 27 '18 at 19:22

sleske · Answer 2 · 2015-12-09T11:37:15.750

3

This is a bug in Microsoft Edge. Disabled buttons accept clicks if they contain any HTML elements (i.e. if they contain anything else than just text).

Reported multiple times via Microsoft Connect:

Event bubbles from child element into element (by SO user Ryan Joy)
Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled

The bug was still present in Build 10565 (16 October 2015). It was fixed in the November update, Build 10586.

A possible (but ugly) workaround is to call some Javascript in onclick for every button, which then checks if the button is disabled and returns false (thus suppressing the click event).

edited Dec 09 '15 at 11:37

answered Oct 27 '15 at 15:13

sleske

81,358
34
189
227

1

I can confirm that this bug is now fixed as of Build 25.10586.0.0. – Ryan Joy Dec 08 '15 at 19:53
@RyanJoy: Yes - the bug you opened in Microsoft Connect (linked above) has also been closed. – sleske Dec 09 '15 at 11:35

score 1 · Answer 3 · answered Nov 05 '15 at 14:17

One work around I've come up with using angularjs is inspired by Ben Nadel's blog here

So for example:

angular.module('myModule').directive(
    "span",
    function spanDirective() {
        return ({
            link: function (scope, element, attributes) {
                element.bind('click', function (e) {
                    if (e.target.parentNode.parentNode.disabled || e.target.parentNode.disabled) {
                        e.stopPropagation();
                    }
                })
            },
            restrict: "E",
        });
    }
);

Forgot to add browser detection in the example, but I guess you'd need to do that. Also this will override click for all span tags, so you might want to define your own instead of overriding such a primitive one — Chen Chen, Nov 05 '15 at 14:34

score 1 · Answer 4 · answered Dec 04 '15 at 18:17

Since you're not always going to be using a span element and probably don't want to create a new directive for every element type, a more general workaround would be to decorate the ngClick directive to prevent the event from reaching the real ngClick's internal event handler when the event is fired on a disabled element.

var yourAppModule = angular.module('myApp');
// ...
yourAppModule.config(['$provide', function($provide) {
    $provide.decorator('ngClickDirective', ['$delegate', '$window', function($delegate, $window) {
        var isEdge = /windows.+edge\//i.test($window.navigator.userAgent);

        if (isEdge) {
            var directiveConfig = $delegate[0];
            var originalCompileFn = directiveConfig.compile;

            directiveConfig.compile = function() {
                var origLinkFn = originalCompileFn.apply(directiveConfig, arguments);

                // Register a click event handler that will execute before the one the original link
                // function registers so we can stop the event.
                return function linkFn(scope, element) {
                    element.on('click', function(event) {
                        if (event.currentTarget && event.currentTarget.disabled) {
                            event.preventDefault();
                            event.stopPropagation();
                            event.stopImmediatePropagation();
                        }
                    });

                    return origLinkFn.apply(null, arguments);
                };
            };
        }

        return $delegate;
    }]);
}]);

Disabled button is clickable on Edge browser

4 Answers4

Linked

Related