[Bug Report][2.5.3] v-navigation-drawer with expand-on-hover throws console errors when hovered
See original GitHub issueEnvironment
Vuetify Version: 2.5.3 Last working version: 2.4.11 Vue Version: 2.6.11 Browsers: Chrome 91.0.4472.77 OS: Mac OS 10.14.6
Steps to reproduce
Use v-navigation-drawer
with expand-on-hover
and mini-variant
Expected Behavior
Navigation drawer expands and contracts
Actual Behavior
Navigation drawer expands and contracts but throws the following console error
index.js:245 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at VueComponent.checkActivatorFixed (index.js:245)
at VueComponent.updateDimensions (index.js:338)
in packages/vuetify/src/mixins/menuable/index.ts
Reproduction Link
https://codepen.io/kotoriii/pen/zYZWyXB
Other comments
The Codepen I linked does not reproduce the issue, even though I tried using as many components as I’m currently using. It’s hard to reproduce my local stack, but error is caused by these added lines in beforeMount()
and beforeDestroy()
in this PR’s recent file changes:
https://github.com/vuetifyjs/vuetify/pull/13670/files#diff-a510753fb8a85de8db6181b6c250d80bcccbf5fa2d4a97e5660e233bfc718200R193
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (6 by maintainers)
Top GitHub Comments
From your description it just looks like it’s coming from https://github.com/vuetifyjs/vuetify/blob/ec8fafa9e785f6817bf6d0058a6953b0091a1370/packages/vuetify/src/mixins/menuable/index.ts#L287
But doesn’t directly looks related to the PR
It would be nice to know exactly what is the value of el when it throws this error, can you put a breakpoint on this line and check in the browser debugger what’s the value of el before it throws the error?
Because it should only be able to be an Element, a falsy value would step out of the loop, so my guess is one component is returning something from getActivator that is not an HTMLElement but evaluates truthy, maybe a string or similar, but typescript should in that case catch this
Do you by chance extend some mixins directly, or have some custom components extending the vuetify components or similar?
I don’t think that’s what’s causing it, it wouldn’t have got to the debugger line. Try enabling “pause on exceptions” in the top right and see what the element that causes the error is. You could also add
console.log(el)
above line 245 to list all the traversed elements.