SyntaxError: CSS selector not properly escaped for file paths with special characters #9173
Description
Description
When a file path contains file:// prefix and non-ASCII characters (e.g., Chinese), the CSS selector fails with:
SyntaxError: '[data-key="file://"output/20260118_095332_末世冰封_我搬空全球超市造神域.md""]' is not a valid selector.
Stack Trace
querySelector@[native code]
@tauri://localhost/assets/session-CCDakWO3.js:30:6115
Cb@tauri://localhost/assets/index-D9T6R7qf.js:2:8252
$l@tauri://localhost/assets/index-D9T6R7qf.js:2:7983
Ld@tauri://localhost/assets/index-D9T6R7qf.js:2:9468
Qk@tauri://localhost/assets/index-D9T6R7qf.js:2:10732
yn@tauri://localhost/assets/index-D9T6R7qf.js:2:9656
Jk@tauri://localhost/assets/index-D9T6R7qf.js:2:10317
yn@tauri://localhost/assets/index-D9T6R7qf.js:2:9668
D@tauri://localhost/assets/index-D9T6R7qf.js:2:3812
M@tauri://localhost/assets/index-D9T6R7qf.js:2:3770
Root Cause
The file path is not being escaped before being used in querySelector. The selector contains unescaped quotes and special characters.
Suggested Fix
Use CSS.escape() when building the selector:
// Before (broken)
document.querySelector(\`[data-key="\${key}"]\`);
// After (fixed)
document.querySelector(\`[data-key="\${CSS.escape(key)}"]\`);Environment
- OpenCode Desktop (Tauri)
- File path with Chinese characters
Workaround
Avoid using non-ASCII characters in file names.