search

vuejs / devtools

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools.vuejs.org/
MIT License
1.68k stars 114 forks source link

Cannot select nested component if parent has @mouseover.stop #487

Open joelearn opened 4 months ago

joelearn commented 4 months ago

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 commented 4 months ago

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

joelearn commented 4 months ago

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 commented 4 months ago

We need to find a way to force ignore stopPropogation

joelearn commented 4 months ago

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.