fix(launcher): implement reliable click-outside-to-close for cfg drawer

Flowbite's built-in outsideclose was unreliable for this side-drawer setup.
Root cause: Flowbite's _onclick handler uses dlg.getBoundingClientRect() to
detect backdrop clicks. This works in theory for showModal() dialogs, but
something in the Svelte transition / stacking context prevented it firing.

Fix: bypass Flowbite's detection entirely.
- onclick prop on <Drawer> is spread through Flowbite's restProps chain
  to the native <dialog> element, overriding the broken _onclick handler.
  Handler: just closes the drawer unconditionally.
- A stopPropagation wrapper div around all visual panel content ensures
  that clicks INSIDE the panel never bubble up to the dialog element.
  Only genuine backdrop clicks (outside the visual panel area) reach
  the dialog and trigger the close handler.

ESC key is unaffected — it fires oncancel not onclick.
This commit is contained in:
Scott Idem
2026-03-13 15:53:01 -04:00
parent 84fb39d85b
commit e4cb968659

View File

@@ -875,6 +875,7 @@
<Drawer
dismissable={false}
onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
class="bg-orange-50 dark:bg-slate-800 opacity-90 hover:opacity-97 transition-all duration-300 border border-gray-300 dark:border-gray-600 w-full md:w-96 lg:w-[32rem]"
placement="left"
{...{
@@ -888,6 +889,13 @@
bind:hidden={$events_loc.launcher.hide_drawer__cfg}
id="sidebar1"
>
<!-- Stop-propagation wrapper: prevents clicks inside the visual panel from
bubbling up to the <dialog> element. The onclick on the <Drawer> above
is spread through to the native <dialog> by Flowbite, overriding its
broken outsideclose detection. With this wrapper, ONLY genuine backdrop
clicks (outside the visible panel) reach the dialog and close the drawer. -->
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
<div role="presentation" onclick={(e) => e.stopPropagation()}>
<Launcher_cfg></Launcher_cfg>
<hr class="my-2 border-gray-300 dark:border-gray-600" />
@@ -921,6 +929,7 @@
</a>
{/if}
</div>
</div>
</Drawer>
<Drawer