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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user