Material: tooltip: $mdGestureProvider.disableAll() throws error In IE11 when tooltips try to open

[gauravlodha]

Bug, enhancement request, or proposal:

Detailed Reproduction Steps:

1. Disable mdGestureProvider in IE
2. It throws error TypeError: Object doesn't support property or method 'contains'

What is the expected behaviour?

It should not throw an error in IE11

What is the current behaviour?

TypeError: Object doesn't support property or method 'contains'

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.8
• AngularJS Material: 1.1.19
• OS: Windows 10
• Browsers: IE11

Is there anything else we should know? Stack Traces, Screenshots, etc.

[Splaktar]

Can you please provide a CodePen reproduction? I know that IE can't use normal CodePen, but it can view the debug/fullscreen view of CodePen for testing.

[gauravlodha]

@Splaktar
CodePen link: https://s.codepen.io/gauravlodha/debug/VJjXqd/jVApoyBjpYRr

[Splaktar]

The debug view in CodePen can apparently expire. I tracked down the actual CodePen here and created a fork and new debug view.

There is an extra reproduction step that isn't mentioned in the OP:

• you need to hover over the button before the errors are generated

This is due to the error being triggered by the tooltip.

Here's the full set of errors that I see

TypeError: Object doesn't support property or method 'contains'
   at d.prototype._fetchContentElement (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:8227)
   at d.prototype._prepareContentElement (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:6722)
   at d.prototype.compile (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:6594)
   at s.prototype._compile (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:287676)
   at Anonymous function (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:288240)
   at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js:142:60)
   at s.prototype._createPanel (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:288171)
   at Anonymous function (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.
Possibly unhandled rejection: mdPanel: Panel does not exist yet. Call open() or attach().

[Splaktar]

This was introduced in 1.1.2 via PR https://github.com/angular/material/pull/9551.

The problematic line is https://github.com/angular/material/commit/dfe1a006cc57f94cfcbb8de0b419049e158b62a4#diff-badbc38934ba287f41f88d2e2276e98bR295.

MDN's Docs on Node.contains() seem to indicate that this should be supported. But in the IE11 debugger, document.contains is clearly undefined. However, document.body.contains appears to be defined and appears to function properly.

[gauravlodha]

The debug view in CodePen can apparently expire. I tracked down the actual CodePen here and created a fork and new debug view.

There is an extra reproduction step that isn't mentioned in the OP:

• you need to hover over the button before the errors are generated

This is due to the error being triggered by the tooltip.

Here's the full set of errors that I see

TypeError: Object doesn't support property or method 'contains'
   at d.prototype._fetchContentElement (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:8227)
   at d.prototype._prepareContentElement (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:6722)
   at d.prototype.compile (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:6594)
   at s.prototype._compile (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:287676)
   at Anonymous function (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:288240)
   at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js:142:60)
   at s.prototype._createPanel (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.js:7:288171)
   at Anonymous function (https://ajax.googleapis.com/ajax/libs/angular_material/1.1.19/angular-material.min.
Possibly unhandled rejection: mdPanel: Panel does not exist yet. Call open() or attach().

My bad, I thought it was on click, I didn't debug well I guess :(

[Splaktar]

No problem, many thanks for the report!

[codymikol]

It looks like there is a polyfill within mdGestureHandler that doesn't get instantiated when gestures are disabled because of an early return.

Either we can move the polyfill above the early return, or put it somewhere that makes more sense. It looks like there is a TODO stating this should be moved into $mdUtil.

If that's the way to go I'd be happy to make a PR replacing instances of document.contains with something along the lines of $mdUtil.documentContains if that works for you @Splaktar

[Splaktar]

@codymikol good catch! Let me see if I can update my PR to take advantage of this information.

[Splaktar]

@codymikol OK, I've updated PR https://github.com/angular/material/pull/11749. Please take a look.

[codymikol]

LGTM 🐔