Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-14 10:57:54 +02:00
Code Issues Activity

fix(shortcut): Address PR review feedback

Browse Source 
- 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
This commit is contained in:
micahkepe 2026-01-24 12:36:34 -08:00 committed by Micah Kepe
parent 663612cdab
commit a5480131b5
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web_src/js/components/RepoFileSearch.vue
View File

@ -154,7 +154,7 @@ watch([searchQuery, filteredFiles], async () => {
@input="handleSearchInput" @keydown="handleKeyDown" @input="handleSearchInput" @keydown="handleKeyDown"
@focus="isInputFocused = true" @blur="isInputFocused = false" @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> </div>
<Teleport to="body"> <Teleport to="body">
@ -202,7 +202,7 @@ watch([searchQuery, filteredFiles], async () => {
border-color: var(--color-primary) !important; border-color: var(--color-primary) !important;
} }
.repo-search-shortcut-hint { .repo-file-search-shortcut-hint {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 50%; top: 50%;
@ -219,7 +219,7 @@ watch([searchQuery, filteredFiles], async () => {
} }
/* Hide kbd when input is focused so it doesn't interfere with focus border */ /* 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; display: none;
} }

7
web_src/js/modules/observer.ts
View File

@ -69,9 +69,9 @@ function attachGlobalEvents() {
// Elements declare their keyboard shortcuts via data-global-keyboard-shortcut attribute. // 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). // When a matching key is pressed, the element is focused (for inputs) or clicked (for buttons/links).
document.addEventListener('keydown', (e: KeyboardEvent) => { 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; const target = e.target as HTMLElement;
if (target.matches('input, textarea, select, [contenteditable="true"]')) { if (target.matches('input, textarea, select') || target.isContentEditable) {
return; return;
} }
@ -82,7 +82,8 @@ function attachGlobalEvents() {
// Find element with matching shortcut (case-insensitive) // Find element with matching shortcut (case-insensitive)
const key = e.key.toLowerCase(); 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; if (!elem) return;
e.preventDefault(); e.preventDefault();