search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.77k stars 6.95k forks source link

[Bug Report][2.5.14] Manual operation of mouseEnterHandler of v-menu not possible #14403

Closed HOTAPIYC closed 2 years ago

HOTAPIYC commented 2 years ago

Environment

Vuetify Version: 2.5.14 Vue Version: 2.6.11 Browsers: Chrome 91.0.4472.114 OS: Windows 10

Steps to reproduce

Hover over the activator to show the menu.

Expected Behavior

The menu shows when hovering over the activator.

Actual Behavior

An error is thrown: "Cannot read property 'contains' of undefined."

Reproduction Link

https://codesandbox.io/s/custom-menu-activator-1om2b

Other comments

The intent of this setup is to take advantage of the open-on-hover attribute while separating the activator and the menu component in two separated components.

This used to work in Vuetify 1.5. The issue is the mouseEnterHandler, of the v-menu component. Within this method, the line this.isActive = true; was dropped. When manually restoring this, everything is fine.

KaelWD commented 2 years ago

mouseEnterHandler is for the content element, the activator listeners are defined here: https://github.com/vuetifyjs/vuetify/blob/25e80a11d4e61e5ceef8659e24b8c63c39f8469b/packages/vuetify/src/mixins/activatable/index.ts#L103-L110

You can also just use v-model instead of calling private methods on the component instance.

HOTAPIYC commented 2 years ago

Thanks for the quick response! I am also not so happy with calling private methods, however v-model is not solving the problem - it is then impossible to select anything from the menu, as it will close immediately when leaving the activator. With your hint though could restore the functionality as desired.