Cannot select nested component if parent has @mouseover.stop

[joelearn]

If a component has a @mouseover.stop handler defined, no child components can be selected via the devtools components tab. However, it works as expected using the component inspector tool.

Here's a reproduction: https://stackblitz.com/edit/vitejs-vite-j4abqj?file=src%2Fcomponents%2FHelloWorld.vue

[alexzhang1030]

It's might a bug of vite-plugin-vue-inspector

[joelearn]

Just using vite-plugin-vue-inspector on its own seems to work fine. Try it here: https://stackblitz.com/edit/vitejs-vite-7ujp2h?file=src%2FApp.vue

Do both ways of selecting a component use this plugin?

[alexzhang1030]

We need to find a way to force ignore stopPropogation

[joelearn]

So after a little digging around, vite-plugin-vue-inspector uses mousemove for highlighting components. This can be replicated by adding @mousemove.stop to a component, which will then stop the highlighting of nested components. See: https://stackblitz.com/edit/vitejs-vite-cufj5x?file=src%2Fcomponents%2FHelloWorld.vue

We could have devtools-next use mousemove to be consistent with vite-plugin-vue-inspector, but going with the suggestion by @alexzhang1030 would be more robust.