Skip to content

Conversation

@Slone123c
Copy link
Contributor

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

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://).
@github-actions
Copy link
Contributor

Thanks for your contribution!

This PR doesn't have a linked issue. All PRs must reference an existing issue.

Please:

  1. Open an issue describing the bug/feature (if one doesn't exist)
  2. Add Fixes #<number> or Closes #<number> to this PR description

See CONTRIBUTING.md for details.

@github-actions
Copy link
Contributor

The following comment was made by an LLM, it may be inaccurate:

No duplicate PRs found

@Slone123c Slone123c closed this Jan 17, 2026
@Slone123c Slone123c reopened this Jan 17, 2026
@adamdotdevin adamdotdevin merged commit 07dc8d8 into anomalyco:dev Jan 17, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants