question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report][2.5.3] v-navigation-drawer with expand-on-hover throws console errors when hovered

See original GitHub issue

Environment

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:closed
  • Created 2 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
Tofandelcommented, Jun 4, 2021

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?

1reaction
KaelWDcommented, Jun 7, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fix JavaScript errors that are reported in the Console
Debugging and resolving JavaScript-related errors that are reported ... Open the demo webpage JavaScript error reported in the Console tool ...
Read more >
Console Errors with this plugin - WordPress.org
The plugin still seems to work, but these messages seem to suggest that something isn't playing right with the latest version of WordPress...
Read more >
Toggle v-navigation-drawer's expand-on-hover not resizing ...
Fixed it by changing the key of my navigation drawer which forces a re-render of the navigation drawer component: <v-navigation-drawer app ...
Read more >
Finding clicks that lead to console errors - FullStory Support
Too often bugs and errors are flagged by our users once they've encountered an error. With FullStory Error Clicks, you can quickly and...
Read more >
What went wrong? Troubleshooting JavaScript - MDN Web Docs
At this point, let's consult the developer console to see if it reports any syntax errors, then try to fix them. You'll learn...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found