Comfy-Org / Comfy-Org/ComfyUI_frontend

Fix unsafe type assertions to DOM element types throughout codebase

Open
#8,133 0 comments 0 reactions 0 assignees View on GitHub
developer experience
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Problem

Throughout the codebase, there are numerous unsafe type assertions to DOM element types (HTMLElement, HTMLInputElement, HTMLSelectElement, etc.) that don't verify the target is non-null or actually the expected type before casting.

**Example pattern:**
```typescript
const capturePointer = (e: PointerEvent) =>
(e.target as HTMLElement).setPointerCapture(e.pointerId)
```

This can fail at runtime if `e.target` is null.

**Safer pattern:**
```typescript
const capturePointer = (e: PointerEvent) => {
if (e.target instanceof HTMLElement) {
e.target.setPointerCapture(e.pointerId)
}
}
```

## Scope

Found **60+ occurrences** across the codebase, including:

- Event handlers casting `event.target` or `event.currentTarget`
- DOM query results (`querySelector`, `querySelectorAll`)
- Element references and refs

### Files with highest occurrence counts:
- `src/components/ui/stepper/FormattedNumberStepper.vue` (2)
- `src/components/rightSidePanel/parameters/TabSubgraphInputs.vue` (2)
- `src/components/rightSidePanel/parameters/TabGlobalParameters.vue` (2)
- `src/components/rightSidePanel/layout/TransitionCollapse.vue` (2)
- `src/components/topbar/WorkflowTabs.vue` (2)
- Many more files with 1-2 occurrences each

## Action Items

1. Replace unsafe `as HTMLElement` (and similar) casts with proper type guards using `instanceof`
2. Add null checks before accessing properties/methods
3. Consider using `currentTarget` instead of `target` where appropriate (currentTarget is typed and guaranteed to be the element the listener was attached to)

## References

- Originated from PR #7825 review: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7825#discussion_r2688700030
- Related to TypeScript type safety best practices

## Search Patterns Used

```bash
rg 'as HTML\w*Element' --type=ts -g '*.vue'
```

---

Reported by: @DrJKL

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-8133-Fix-unsafe-type-assertions-to-DOM-element-types-throughout-codebase-2eb6d73d36508179bff3ddb8905a3c98) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.