Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
tachiaus opened this Issue Dec 5, 2017 · 13 comments

Comments

Projects
None yet
4 participants
@tachiaus
Copy link

tachiaus commented Dec 5, 2017

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 comment has been minimized.

Copy link
Author

tachiaus commented Dec 6, 2017

This issue is also present in beta7

@Samuell1

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 6, 2017

@VdustR

This comment has been minimized.

Copy link
Member

VdustR commented Dec 6, 2017

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

@tachiaus

This comment has been minimized.

Copy link
Author

tachiaus commented Dec 6, 2017

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 comment has been minimized.

Copy link
Author

tachiaus commented Dec 10, 2017

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

This comment has been minimized.

Copy link

neclepsio commented Dec 20, 2017

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

This comment has been minimized.

Copy link

neclepsio commented Dec 20, 2017

To workaround, just add this to your polyfills:

"".constructor.name = "String";
@tachiaus

This comment has been minimized.

Copy link
Author

tachiaus commented Dec 22, 2017

How would I add this to babel?

@Samuell1 Samuell1 added bug and removed needs repro labels Dec 27, 2017

@VdustR

This comment has been minimized.

Copy link
Member

VdustR commented Dec 28, 2017

What if compare the constructor directly?

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

This comment has been minimized.

Copy link
Author

tachiaus commented Dec 28, 2017

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

This comment has been minimized.

Copy link
Member

VdustR commented Dec 28, 2017

I'm sorry, there is a typo

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

This comment has been minimized.

Copy link
Author

tachiaus commented Dec 29, 2017

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

This comment has been minimized.

Copy link
Author

tachiaus commented Dec 29, 2017

Similar to the dialog issue here
#1317

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

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

VdustR added a commit to VdustR/vue-material that referenced this issue Jan 3, 2018

VdustR added a commit to VdustR/vue-material that referenced this issue Jan 3, 2018

fix: compare node by type
dom constructors do not have name property in IE.
replace that with comparing by their node type.

fix vuematerial#1263

VdustR added a commit to VdustR/vue-material that referenced this issue Jan 3, 2018

fix(MdMenuContent): height for IE
got height `0` with style `flex-direction: column`

fix vuematerial#1263

marcosmoura added a commit that referenced this issue Jan 3, 2018

fix: menu compatibility with IE (node type statement) (#1365)
* fix: compare node by type

dom constructors do not have name property in IE.
replace that with comparing by their node type.

fix #1263

* fix(MdMenuContent): height for IE

got height `0` with style `flex-direction: column`

fix #1263
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.