Can't inspect disabled elements

[Rich-Harris]

Describe the bug

if i have something like <button disabled> or <input disabled> it seems i can't inspect it

Reproduction URL

some other time, sorry

Reproduction

No response

Logs

No response

System Info

next

[dominikg]

if the disabled element does not emit mouse events, it won't get selected with a mouse

vite-plugin-svelte/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte

Line 104 in 339e8d3

function mouseover({ target }) {

.

esp firefox is known for not emitting events on disabled elements.
however you might be able to use arrow keys (down for first child of current, right for next sibling) to get to the disabled element from the parent that was selected.

[dominikg]

actually mouseover works, its the click to open the editor that does not. not sure how to work around that apart from creating a mask element thats layered on top of the active element so that the click hits that instead and goes through?

[bluwy]

Perhaps it's possible in the inspect state to mark all disabled elements with pointer-events: none so that the click passes through and hits the parent element?

[dominikg]

you can add input[disabled].svelte-inspector-active-target {pointer-events: none} to the styles, but the behavior when moving the cursor over the element is a bit erratic then (toggling selection between parent and that element.

if you do it unconditionally, well, then it won't get selected because now mousemove doesn't hit.

Surprisingly the enter key did fire, so maybe keeping it as is and user has to use Enter to open is an ok workaround? 😬

[dominikg]

switching from click to pointerdown would work. is that ok or do we need to wait for the corrosponding pointerup to see if it was "clickish" (short delta for time and coords)

[dominikg]

workaround is to press "Enter" while the disabled element is selected to open.