tom/edentext
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Escape closes the character and date/time pickers

Browse Source 
Both handled the key on the dropdown, but opening one leaves the focus on
its trigger button, which sits outside it — so Escape never arrived and the
popover stayed open. Both elements listen now.
This commit is contained in:
Steffen Becker committed 2026-08-16 03:04:43 +02:00
1 parent 273c533fce
commit c500762275
2 files changed
+10 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/DateTimePicker.svelte
+5 -6
View File
@@ -61,11 +61,10 @@
open = false;
}
// On both the trigger and the dropdown: opening leaves the focus on the trigger,
// which sits outside the dropdown and never delivers the key to it.
function onKeydown(e: KeyboardEvent) {
if (e.key === 'Escape') {
open = false;
(e.currentTarget as HTMLElement).blur();
}
if (e.key === 'Escape') open = false;
}
function dtPickerClickOutside(node: HTMLElement) {
@@ -78,7 +77,7 @@
</script>
<div class="dt-picker" use:dtPickerClickOutside>
<button class="dt-trigger" onclick={openPicker} title={t().dateTime.insert} aria-pressed={open} aria-label={t().dateTime.insert}>
<button class="dt-trigger" onclick={openPicker} onkeydown={onKeydown} title={t().dateTime.insert} aria-pressed={open} aria-label={t().dateTime.insert}>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<rect x="1.75" y="2.75" width="12.5" height="11.5" rx="1.5" stroke="currentColor" />
<path d="M1.75 5.5h12.5M4.5 1.5v2.5M11.5 1.5v2.5" stroke="currentColor" stroke-linecap="round" />
@@ -88,7 +87,7 @@
</button>
{#if open}
<div class="dt-dropdown" role="dialog" aria-label={t().dateTime.insert} tabindex="-1" onkeydown={onKeydown}>
<div class="dt-dropdown" role="dialog" onkeydown={onKeydown} aria-label={t().dateTime.insert} tabindex="-1">
<div class="dt-columns">
<div class="dt-col">
<div class="dt-section-label">{t().dateTime.dateHeading}</div>
src/lib/components/SpecialCharPicker.svelte
+5 -6
View File
@@ -110,11 +110,10 @@
saveRecents(next);
}
// On both the trigger and the dropdown: opening leaves the focus on the trigger,
// which sits outside the dropdown and never delivers the key to it.
function onKeydown(e: KeyboardEvent) {
if (e.key === 'Escape') {
open = false;
(e.currentTarget as HTMLElement).blur();
}
if (e.key === 'Escape') open = false;
}
function charPickerClickOutside(node: HTMLElement) {
@@ -127,14 +126,14 @@
</script>
<div class="char-picker" use:charPickerClickOutside>
<button class="char-trigger" onclick={openPicker} title={t().special.insertChar} aria-pressed={open}>
<button class="char-trigger" onclick={openPicker} onkeydown={onKeydown} title={t().special.insertChar} aria-pressed={open}>
<svg width="18" height="18" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<text x="8" y="12.5" font-size="14" font-weight="700" font-family="var(--font-serif, serif)" fill="currentColor" text-anchor="middle">Ω</text>
</svg>
</button>
{#if open}
<div class="char-dropdown" role="dialog" aria-label={t().special.insertChar} tabindex="-1" onkeydown={onKeydown}>
<div class="char-dropdown" role="dialog" onkeydown={onKeydown} aria-label={t().special.insertChar} tabindex="-1">
<!-- svelte-ignore a11y_autofocus -->
<input
type="text"