Refactor palette keyboard focus handling
Ensure proper focus management when switching between browse and search modes, and avoid double-handling keyboard events when the name input is active.
This commit is contained in:
@@ -132,6 +132,7 @@ function askName() {
|
|||||||
} else if (e.key === 'Escape') {
|
} else if (e.key === 'Escape') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
cleanupNameInput();
|
cleanupNameInput();
|
||||||
|
_overlay.focus();
|
||||||
renderBrowse();
|
renderBrowse();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -140,7 +141,6 @@ function askName() {
|
|||||||
function cleanupNameInput() {
|
function cleanupNameInput() {
|
||||||
const el = document.getElementById('cp-name-input');
|
const el = document.getElementById('cp-name-input');
|
||||||
if (el) el.remove();
|
if (el) el.remove();
|
||||||
_input.style.display = '';
|
|
||||||
const bc = document.getElementById('cp-breadcrumb');
|
const bc = document.getElementById('cp-breadcrumb');
|
||||||
if (bc) bc.style.display = 'flex';
|
if (bc) bc.style.display = 'flex';
|
||||||
}
|
}
|
||||||
@@ -196,6 +196,7 @@ function createDOM() {
|
|||||||
if (_overlay) return;
|
if (_overlay) return;
|
||||||
_overlay = document.createElement('div');
|
_overlay = document.createElement('div');
|
||||||
_overlay.className = 'command-palette-overlay';
|
_overlay.className = 'command-palette-overlay';
|
||||||
|
_overlay.tabIndex = -1; // needed to receive keyboard events when input is hidden (browse mode)
|
||||||
_overlay.innerHTML = `<div class="command-palette">
|
_overlay.innerHTML = `<div class="command-palette">
|
||||||
<div class="cp-header"><input type="text" class="cp-input" placeholder="Rechercher un fichier... (tapez > pour les commandes)" spellcheck="false" autocomplete="off"><div class="cp-breadcrumb" id="cp-breadcrumb"></div><span class="cp-hint">Ctrl+Shift+Espace</span></div>
|
<div class="cp-header"><input type="text" class="cp-input" placeholder="Rechercher un fichier... (tapez > pour les commandes)" spellcheck="false" autocomplete="off"><div class="cp-breadcrumb" id="cp-breadcrumb"></div><span class="cp-hint">Ctrl+Shift+Espace</span></div>
|
||||||
<div class="cp-results"></div>
|
<div class="cp-results"></div>
|
||||||
@@ -237,8 +238,10 @@ function switchMode(m) {
|
|||||||
_mode = m;
|
_mode = m;
|
||||||
if (m === 'browse' || m === 'browse-vault') {
|
if (m === 'browse' || m === 'browse-vault') {
|
||||||
_input.style.display = 'none'; _input.disabled = true;
|
_input.style.display = 'none'; _input.disabled = true;
|
||||||
|
_overlay.focus(); // overlay receives keyboard events when input is hidden
|
||||||
} else {
|
} else {
|
||||||
_input.style.display = ''; _input.disabled = false;
|
_input.style.display = ''; _input.disabled = false;
|
||||||
|
_input.focus(); // restore focus to search input
|
||||||
const bc = document.getElementById('cp-breadcrumb'); if (bc) bc.style.display = 'none';
|
const bc = document.getElementById('cp-breadcrumb'); if (bc) bc.style.display = 'none';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -309,6 +312,8 @@ function scroll() { const s = _results.querySelector('.cp-selected'); if (s) s.s
|
|||||||
// ── Overlay keydown handler (for browse modes where input is hidden) ──
|
// ── Overlay keydown handler (for browse modes where input is hidden) ──
|
||||||
function onOverlayKeyDown(e) {
|
function onOverlayKeyDown(e) {
|
||||||
if (_mode !== 'browse' && _mode !== 'browse-vault') return;
|
if (_mode !== 'browse' && _mode !== 'browse-vault') return;
|
||||||
|
// Don't handle if name input is active (it has its own keydown handler)
|
||||||
|
if (document.getElementById('cp-name-input')) return;
|
||||||
onKeyDown(e);
|
onKeyDown(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user