anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-22 18:25:32 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

[PR #9030] fix: escape CSS selector keys to handle special characters #12958

New Issue
Closed
opened 2026-02-16 18:17:50 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 18:17:50 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/anomalyco/opencode/pull/9030

State: closed
Merged: Yes

Use CSS.escape() for data-key attribute selectors in querySelector to properly handle file paths with non-ASCII characters (e.g., Chinese) and special URL protocols (file://).

What does this PR do?

The desktop app crashes with:
SyntaxError: 'data-key="file://xxxxxx.md""' is not a valid selector.

This occurs because querySelector requires special characters in attribute selectors to be escaped.
image

Solution

Wrap key values with CSS.escape() before using them in selectors:

// Before
querySelector(`[data-key="${key}"]`)
// After  
querySelector(`[data-key="${CSS.escape(key)}"]`)
Changes
- packages/ui/src/components/list.tsx: Added CSS.escape() to both querySelector calls (lines 72, 84)

### How did you verify your code works?
I did a local test.
1. CSS.escape() correctly escapes :, /, and . characters that are special in CSS selectors
2. The escaped selector successfully finds the element
**Original Pull Request:** https://github.com/anomalyco/opencode/pull/9030 **State:** closed **Merged:** Yes --- Use CSS.escape() for data-key attribute selectors in querySelector to properly handle file paths with non-ASCII characters (e.g., Chinese) and special URL protocols (file://). ### What does this PR do? The desktop app crashes with: SyntaxError: 'data-key="file://xxxxxx.md""' is not a valid selector. This occurs because `querySelector` requires special characters in attribute selectors to be escaped. <img width="1460" height="842" alt="image" src="https://github.com/user-attachments/assets/4df71b3f-6115-4555-816d-6f0a48786d71" /> ## Solution Wrap key values with `CSS.escape()` before using them in selectors: ```typescript // Before querySelector(`[data-key="${key}"]`) // After querySelector(`[data-key="${CSS.escape(key)}"]`) Changes - packages/ui/src/components/list.tsx: Added CSS.escape() to both querySelector calls (lines 72, 84) ### How did you verify your code works? I did a local test. 1. CSS.escape() correctly escapes :, /, and . characters that are special in CSS selectors 2. The escaped selector successfully finds the element
yindo added the pull-request label 2026-02-16 18:17:50 -05:00
yindo closed this issue 2026-02-16 18:17:50 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#12958
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?