md-menu "Unhandled promise rejection" within IE 11 (edge mode)

[tachiaus]

Steps to reproduce

Have an md-menu anywhere on page, when clicking to open, the menu won't open and the console gives an error, works in other browsers

Which browser?

IE 11 running in edge mode

VueMaterial 1.0.0-beta-6

What is expected? Menu should open

What is actually happening? Menu items don't display, console shows error Unhandled promise rejection TypeError: Unable to get property 'toLowerCase' of undefined or null reference

at _callee2$ (file:///C:/Users/benma/Desktop/vuematerial/my-project/dist/testmenu.js:22201:19)

Error appears in this section of code createPopper: function () { var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() { var options; return regeneratorRuntime.wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: if (this.mdSettings) { options = (0, _deepmerge2.default)(this.getPopperOptions(), this.mdSettings); if (this.$el.constructor.name.toLowerCase() !== 'comment') { this.popperInstance = new _popper2.default(this.originalParentEl, this.$el, options); } } case 1: case 'end': return _context2.stop(); } } }, _callee2, this); })); }), Specifically at

if (this.$el.constructor.name.toLowerCase() !== 'comment') { this.popperInstance = new _popper2.default(this.originalParentEl, this.$el, options); }

Reproduction Link

<template>
  <div class="page-container">
          <md-menu md-size="medium" md-align-trigger>
            <md-button md-menu-trigger>Add task</md-button>
          <md-menu-content>
            <md-menu-item>Add incoming (quick)</md-menu-item>
            <md-menu-item>Add incoming (new tab)</md-menu-item>
            <md-menu-item>Add out going</md-menu-item>
          </md-menu-content>
        </md-menu>
  </div>
</template>

[tachiaus]

This issue is also present in beta7

[Samuell1]

Its weird because https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase is supported in IE

[VdustR]

We need to check what was happened in IE because that value is not a String in this case.

[tachiaus]

Here is my build

+-- amdclean@2.7.0
+-- babel-core@6.26.0
+-- babel-plugin-transform-remove-strict-mode@0.0.2
+-- babel-polyfill@6.26.0
+-- babel-preset-es2015@6.24.1
+-- babelify@7.3.0
+-- browserify@13.3.0
+-- browserify-hmr@0.3.6
+-- cross-env@1.0.8
+-- envify@3.4.1
+-- es6-promise@4.1.1
+-- es6-promise-promise@1.0.0
+-- http-server@0.9.0
+-- jquery@3.2.1
+-- node-sass@4.7.2
+-- npm-run-all@2.3.0
+-- rjs-build-analysis@0.0.3
+-- uglify-js@2.8.29
+-- vue@2.5.9
+-- vue-material@1.0.0-beta-7
+-- vue-router@3.0.1
`-- watchify@3.9.0

Babel config

{
  "presets": ["es2015"],
  "plugins": ["transform-remove-strict-mode"]
}

[tachiaus]

This issue is also present within when clicking the select input, the same error appears and no drop down options show.

You can remove the error by wrapping

if (this.$el.constructor.name.toLowerCase() !== 'comment') { 
     this.popperInstance = new _popper2.default(this.originalParentEl, this.$el, options); 
}

In another if(this.$el.constructor.name)

But the drop downs still don't open

[neclepsio]

I also have the same problem. It's because String constructor has no "name" property. Maybe it's because it's a native function.

To reproduce simply write "1".constructor.name.toLowerCase() in any IE console: it will show the same error. In Chrome, it displays "string".

[neclepsio]

To workaround, just add this to your polyfills:

"".constructor.name = "String";

[tachiaus]

How would I add this to babel?

[VdustR]

What if compare the constructor directly?

if (this.$el.constructor === Comment) {
  this.popperInstance = new _popper2.default(this.originalParentEl, this.$el, options);
}

[tachiaus]

Hi VdustR,

Modified vue-material.js and added in your above code.

It stopped the console error appearing when clicking on a select or menu, but not drop down or menu actually appears.

With IE 11 in Edge mode, your above code also breaks it in other browsers

[VdustR]

I'm sorry, there is a typo

if (this.$el.constructor !== Comment) {

[tachiaus]

Modified it again, its working in non IE browsers, in IE there is no errors but still no popup.

I can do a console.log within that if which triggers, so it must be another issue with IE, thats causing pop ups to not work.

[tachiaus]

Similar to the dialog issue here https://github.com/vuematerial/vue-material/issues/1317

.md-select-menu {
    display: block !important;
}

This allows the select to appear and function, although its poorly formatted without any scrollbar.