From a5480131b5a952b4bceb4f89b23d9dbe87dee1ec Mon Sep 17 00:00:00 2001
From: micahkepe <micahkepe@gmail.com>
Date: Sat, 24 Jan 2026 12:36:34 -0800
Subject: [PATCH] fix(shortcut): Address PR review feedback

- Use `target.isContentEditable` instead of `[contenteditable="true"]` selector
  to properly detect all contenteditable elements
- Use `CSS.escape()` for keyboard shortcut key to handle special characters
- Rename scoped CSS class to `.repo-file-search-shortcut-hint` to avoid
  conflict with global `.repo-search-shortcut-hint` styles
---
 web_src/js/components/RepoFileSearch.vue | 6 +++---
 web_src/js/modules/observer.ts           | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/web_src/js/components/RepoFileSearch.vue b/web_src/js/components/RepoFileSearch.vue
index 4728d0aef2..650b012113 100644
--- a/web_src/js/components/RepoFileSearch.vue
+++ b/web_src/js/components/RepoFileSearch.vue
@@ -154,7 +154,7 @@ watch([searchQuery, filteredFiles], async () => {
         @input="handleSearchInput" @keydown="handleKeyDown"
         @focus="isInputFocused = true" @blur="isInputFocused = false"
       >
-      <kbd v-show="!searchQuery && !isInputFocused" class="repo-search-shortcut-hint">T</kbd>
+      <kbd v-show="!searchQuery && !isInputFocused" class="repo-file-search-shortcut-hint">T</kbd>
     </div>
 
     <Teleport to="body">
@@ -202,7 +202,7 @@ watch([searchQuery, filteredFiles], async () => {
   border-color: var(--color-primary) !important;
 }
 
-.repo-search-shortcut-hint {
+.repo-file-search-shortcut-hint {
   position: absolute;
   right: 10px;
   top: 50%;
@@ -219,7 +219,7 @@ watch([searchQuery, filteredFiles], async () => {
 }
 
 /* Hide kbd when input is focused so it doesn't interfere with focus border */
-.repo-file-search-input-wrapper input:focus + .repo-search-shortcut-hint {
+.repo-file-search-input-wrapper input:focus + .repo-file-search-shortcut-hint {
   display: none;
 }
 
diff --git a/web_src/js/modules/observer.ts b/web_src/js/modules/observer.ts
index 45db1360af..f1d5d65613 100644
--- a/web_src/js/modules/observer.ts
+++ b/web_src/js/modules/observer.ts
@@ -69,9 +69,9 @@ function attachGlobalEvents() {
   // Elements declare their keyboard shortcuts via data-global-keyboard-shortcut attribute.
   // When a matching key is pressed, the element is focused (for inputs) or clicked (for buttons/links).
   document.addEventListener('keydown', (e: KeyboardEvent) => {
-    // Don't trigger shortcuts when typing in input fields
+    // Don't trigger shortcuts when typing in input fields or contenteditable areas
     const target = e.target as HTMLElement;
-    if (target.matches('input, textarea, select, [contenteditable="true"]')) {
+    if (target.matches('input, textarea, select') || target.isContentEditable) {
       return;
     }
 
@@ -82,7 +82,8 @@ function attachGlobalEvents() {
 
     // Find element with matching shortcut (case-insensitive)
     const key = e.key.toLowerCase();
-    const elem = document.querySelector<HTMLElement>(`[data-global-keyboard-shortcut="${key}"]`);
+    const escapedKey = CSS.escape(key);
+    const elem = document.querySelector<HTMLElement>(`[data-global-keyboard-shortcut="${escapedKey}"]`);
     if (!elem) return;
 
     e.preventDefault();