Vuetify: [Bug Report] Cannot read property 'contains' of undefined (in VMenu.js closeConditional)

[everhardt]

Versions and Environment

Vuetify: 1.5.11
Vue: 2.6.10
Browsers: Chrome 73.0.3683.103
OS: Mac OS 10.14.3

Steps to reproduce

Click on the first button, then click on the second button

Expected Behavior

No error in the console

Actual Behavior

Error in the console:
Uncaught TypeError: Cannot read property 'contains' of undefined at VueComponent.closeConditional

Reproduction Link

https://codepen.io/everhardt/pen/rbwKGG?editors=1010

Other comments

The issue is in https://github.com/vuetifyjs/vuetify/blob/0160a40220a754a5cd1b72620a085bbadbcbf1e8/packages/vuetify/src/components/VMenu/VMenu.js#L203

this.$refs.content is undefined when closeConditional is called

[everttrollip]

Just to confirm, I am experiencing the same bug.

Versions and Environment

Vuetify: 1.5.5
Vue: 2.6.6
Browsers: Version 73.0.3683.103 (Official Build) (64-bit)
OS: Mac OS 10.14.4

[ajorquera]

+1

[jinuem]

+1 Same Issue

[nekosaur]

Please just use the thumbs up if you have nothing else to contribute to the issue.

[jinuem]

Any fixes yet?

[mayank-shaan]

+1

[mojodev]

Temporary solution:
Just replace
if (_this2.$refs.content.contains(e.relatedTarget)) return;

with this snippet
if (_this2.$refs.content && _this2.$refs.content.contains(e.relatedTarget)) return;

in VMenu.js

full code snippet:

mouseLeaveHandler: function mouseLeaveHandler(e) {
      var _this2 = this;
      this.runDelay('close', function () {
        if (_this2.$refs.content && _this2.$refs.content.contains(e.relatedTarget)) return;
        requestAnimationFrame(function () {
          _this2.isActive = false;
          _this2.callDeactivate();
        });
      });
    }

[shadow-light]

This still affects Vuetify 2.0.1. It is especially an issue with Vue router as if the user opens a menu and then moves to a different route before closing it, this error occurs.

[shadow-light]

The previous reproduction example doesn't appear to work anymore. So here's a new one

[evgmel]

This bug can be reproduced on the VuetifyJS site. These are the steps to reproduce an error:
1) Open a page where v-menu component is described;
2) Click on any menu button to open a menu (for today most of the buttons contains DROPDOWN text) and leave the menu opened;
3) Click/Choose another page at the left sidebar so that vue-router changed the contents of the page (e.g. open _Lists_ page).
4) The error occurred at DevTools console:

Uncaught TypeError: Cannot read property 'contains' of undefined

[KaelWD]

This is caused by the setTimeout(..., 0) in ClickOutside meaning the callback is fired after destruction: https://github.com/vuetifyjs/vuetify/blob/d912f825bc510ebc54bc54d9b5fe70a6208e3f48/packages/vuetify/src/directives/click-outside/index.ts#L50-L52

This was added to fix #3021