Fix issue with click_outside and drawers

This commit is contained in:
Andrew Kingston 2024-03-13 13:01:44 +00:00
parent 95f71efdab
commit 5666a965e0
2 changed files with 39 additions and 32 deletions

View File

@ -33,8 +33,8 @@ const handleClick = event => {
} }
// Ignore clicks for drawers, unless the handler is registered from a drawer // Ignore clicks for drawers, unless the handler is registered from a drawer
const sourceInDrawer = handler.anchor.closest(".drawer-container") != null const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
const clickInDrawer = event.target.closest(".drawer-container") != null const clickInDrawer = event.target.closest(".drawer-wrapper") != null
if (clickInDrawer && !sourceInDrawer) { if (clickInDrawer && !sourceInDrawer) {
return return
} }

View File

@ -172,7 +172,13 @@
{#if visible} {#if visible}
<Portal target=".modal-container"> <Portal target=".modal-container">
<div class="underlay" class:hidden={!$modal} transition:drawerFade|local /> <!-- This class is unstyled, but needed by click_outside -->
<div class="drawer-wrapper">
<div
class="underlay"
class:hidden={!$modal}
transition:drawerFade|local
/>
<div <div
class="drawer" class="drawer"
class:stacked={depth > 0} class:stacked={depth > 0}
@ -204,6 +210,7 @@
<slot name="body" /> <slot name="body" />
<div class="overlay" class:hidden={$modal || depth === 0} /> <div class="overlay" class:hidden={$modal || depth === 0} />
</div> </div>
</div>
</Portal> </Portal>
{/if} {/if}