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') {
|
||||
e.preventDefault();
|
||||
cleanupNameInput();
|
||||
_overlay.focus();
|
||||
renderBrowse();
|
||||
}
|
||||
});
|
||||
@@ -140,7 +141,6 @@ function askName() {
|
||||
function cleanupNameInput() {
|
||||
const el = document.getElementById('cp-name-input');
|
||||
if (el) el.remove();
|
||||
_input.style.display = '';
|
||||
const bc = document.getElementById('cp-breadcrumb');
|
||||
if (bc) bc.style.display = 'flex';
|
||||
}
|
||||
@@ -196,6 +196,7 @@ function createDOM() {
|
||||
if (_overlay) return;
|
||||
_overlay = document.createElement('div');
|
||||
_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">
|
||||
<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>
|
||||
@@ -237,8 +238,10 @@ function switchMode(m) {
|
||||
_mode = m;
|
||||
if (m === 'browse' || m === 'browse-vault') {
|
||||
_input.style.display = 'none'; _input.disabled = true;
|
||||
_overlay.focus(); // overlay receives keyboard events when input is hidden
|
||||
} else {
|
||||
_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';
|
||||
}
|
||||
}
|
||||
@@ -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) ──
|
||||
function onOverlayKeyDown(e) {
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user