Button component disabled property and event handlers

Hi,

Internet Explorer 11 - I know old but, still sadly used :frowning: I have a button component on a page and set it to disabled and add a click event handler to show a notification. When the page is displayed in IE, it is greyed out (as expected) but, the button click event still fires and the notification is displayed when I click on the disabled button.

Chome - Same page as above. When loaded in Chrome the button is greyed out the click event handler doesn't execute if I click on the button (as expected). If I put (for example) a left margin (say 20px) onto the same button, now try in Chrome, if I click on the visible part of the button and the click event handler doesn't fire (again as expected). If I click slightly to the left of the visible part of the button (i.e. in the margin), the click event handler now executes even though the button is disabled.

Thanks for the report @markb! We will handle this in our next update (probably tomorrow).

1 Like

Btw here is a workaround:

The problem with IE11 is that even if the element is disabled the events (click in this case) are propagated.

Hi @markb,

Unfortunately our research so far showed that we cannot stop events propagation in IE11. We will continue to look for solution however we will unable to provide fix for this in the next update. I'll post here when we have more info.

Hi! That's fine and understood :smiley: The workaround works for IE so, it's not a major issue for me but, something that would be nice to get fixes for (especially the Chrome issue).