From c5007622754d6e6f6c0deebd73db7913bf6eb9b8 Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Sun, 16 Aug 2026 03:04:43 +0200
Subject: [PATCH] fix: Escape closes the character and date/time pickers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/lib/components/DateTimePicker.svelte    | 11 +++++------
 src/lib/components/SpecialCharPicker.svelte | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/DateTimePicker.svelte b/src/lib/components/DateTimePicker.svelte
index a82d577..cf11bea 100644
--- a/src/lib/components/DateTimePicker.svelte
+++ b/src/lib/components/DateTimePicker.svelte
@@ -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>
diff --git a/src/lib/components/SpecialCharPicker.svelte b/src/lib/components/SpecialCharPicker.svelte
index 4fbf494..26a41ee 100644
--- a/src/lib/components/SpecialCharPicker.svelte
+++ b/src/lib/components/SpecialCharPicker.svelte
@@ -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"