Skip to content

Commit 7f14c0a

Browse files
committed
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
1 parent 33c2b20 commit 7f14c0a

File tree

2 files changed

+7
-6
lines changed

2 files changed

+7
-6
lines changed

web_src/js/components/RepoFileSearch.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ watch([searchQuery, filteredFiles], async () => {
152152
@input="handleSearchInput" @keydown="handleKeyDown"
153153
@focus="isInputFocused = true" @blur="isInputFocused = false"
154154
>
155-
<kbd v-show="!searchQuery && !isInputFocused" class="repo-search-shortcut-hint">T</kbd>
155+
<kbd v-show="!searchQuery && !isInputFocused" class="repo-file-search-shortcut-hint">T</kbd>
156156
</div>
157157

158158
<Teleport to="body">
@@ -200,7 +200,7 @@ watch([searchQuery, filteredFiles], async () => {
200200
border-color: var(--color-primary) !important;
201201
}
202202
203-
.repo-search-shortcut-hint {
203+
.repo-file-search-shortcut-hint {
204204
position: absolute;
205205
right: 10px;
206206
top: 50%;
@@ -217,7 +217,7 @@ watch([searchQuery, filteredFiles], async () => {
217217
}
218218
219219
/* Hide kbd when input is focused so it doesn't interfere with focus border */
220-
.repo-file-search-input-wrapper input:focus + .repo-search-shortcut-hint {
220+
.repo-file-search-input-wrapper input:focus + .repo-file-search-shortcut-hint {
221221
display: none;
222222
}
223223

web_src/js/modules/observer.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ function attachGlobalEvents() {
6969
// Elements declare their keyboard shortcuts via data-global-keyboard-shortcut attribute.
7070
// When a matching key is pressed, the element is focused (for inputs) or clicked (for buttons/links).
7171
document.addEventListener('keydown', (e: KeyboardEvent) => {
72-
// Don't trigger shortcuts when typing in input fields
72+
// Don't trigger shortcuts when typing in input fields or contenteditable areas
7373
const target = e.target as HTMLElement;
74-
if (target.matches('input, textarea, select, [contenteditable="true"]')) {
74+
if (target.matches('input, textarea, select') || target.isContentEditable) {
7575
return;
7676
}
7777

@@ -82,7 +82,8 @@ function attachGlobalEvents() {
8282

8383
// Find element with matching shortcut (case-insensitive)
8484
const key = e.key.toLowerCase();
85-
const elem = document.querySelector<HTMLElement>(`[data-global-keyboard-shortcut="${key}"]`);
85+
const escapedKey = CSS.escape(key);
86+
const elem = document.querySelector<HTMLElement>(`[data-global-keyboard-shortcut="${escapedKey}"]`);
8687
if (!elem) return;
8788

8889
e.preventDefault();

0 commit comments

Comments
 (0)