[MdButton] click on button throws exception in IE11

[ajdalshov]

Steps to reproduce

Click a MdButton that has ripple effect

Which browser?

Tested with: Win7 / IE11 (11.0.9600.19102) Win7 / IE11 (11.0.9600.19155) Win10 / IE11 (11.345.17134.0)

What is expected?

Button ripple effect should work and no exception should occur when clicking a button

What is actually happening?

[Vue warn]: Error in callback for watcher "mdActive": "TypeError: Unable to get property '1' of undefined or null reference"

found in

---> <MdRipple> at src/components/MdRipple/MdRipple.vue
       <MdButtonContent> at src/components/MdButton/MdButtonContent.vue
         <MdButton> at src/components/MdButton/MdButton.vue
[...]

The error can be traced back to line 55 in src/components/MdRipple/MdRipple.vue

const isEvent = active.constructor.toString().match(/function (\w*)/)[1].toLowerCase() === 'mouseevent'

What happens is that active.constructor.toString() returns

using IE11:

[object MouseEvent]

using Chrome:

function MouseEvent() { [native code] }

...meaning that the regex inside the match() method will fail and return null on IE11.

The impact is that exception is thrown in dev console and that the ripple effect does not show in IE11.

[LongBu]

@Samuell1 @marcosmoura , Any possibility this could get some attention? I attempted to push a branch, but getting a 403 from the repo (not sure if it's still publicly accessible?). Please let me know if this is possible or if you have comments/questions.
Thanks!

Deltas are:

diff --git a/src/components/MdRipple/MdRipple.vue b/src/components/MdRipple/MdRipple.vue index 01ae6129..9ffaf35c 100644 --- a/src/components/MdRipple/MdRipple.vue +++ b/src/components/MdRipple/MdRipple.vue @@ -51,10 +51,10 @@ }, watch: { mdActive (active) {

• const isBoolean = typeof active === 'boolean'

• const isEvent = active.constructor.toString().match(/function (\w*)/)[1].toLowerCase() === 'mouseevent'

• const isBooleanOrObject = typeof active === 'boolean' || typeof active === 'object';

• const isEvent = active.constructor.toString().match(/(function|object) (\w*)/)[2].toLowerCase() === 'mouseevent';

• if (isBoolean && this.mdCentered && active) {

• if (isBooleanOrObject && this.mdCentered && active) { this.startRipple({ type: 'mousedown' }) diff --git a/src/components/MdTable/MdTable.vue b/src/components/MdTable/MdTable.vue index 65685a72..5a96c795 100644 --- a/src/components/MdTable/MdTable.vue +++ b/src/components/MdTable/MdTable.vue @@ -416,4 +416,9 @@ overflow: hidden; } }

• @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

• .md-table{

• display:block;

• }

• }

[mpesok]

Yes, the proposed fix would be greatly appreciated as it removes the IE11 blocker.