mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
fix(modal): prevent clicking inside inner modal from closing the modal
- revert adding a `stopPropagation` modifier to the PasswordInput "toggle password" button
This commit is contained in:
parent
a7a257cdce
commit
52a10d3acd
5 changed files with 23 additions and 12 deletions
|
@ -14,7 +14,9 @@
|
|||
</script>
|
||||
|
||||
{#if story === undefined}
|
||||
<ComposedModal {...$$props.composedModal}>
|
||||
<ComposedModal {...$$props.composedModal} on:click={(e) => {
|
||||
console.log(e.target)
|
||||
}}>
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
|
|
|
@ -47,6 +47,7 @@
|
|||
|
||||
let buttonRef = null;
|
||||
let innerModal = null;
|
||||
let didClickInnerModal = false;
|
||||
|
||||
setContext("ComposedModal", {
|
||||
closeModal: () => {
|
||||
|
@ -102,10 +103,9 @@
|
|||
class:bx--modal--danger={danger}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click={({ target }) => {
|
||||
if (!innerModal.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
on:click={() => {
|
||||
if (!didClickInnerModal) open = false;
|
||||
didClickInnerModal = false;
|
||||
}}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
|
@ -121,7 +121,10 @@
|
|||
bind:this={innerModal}
|
||||
class:bx--modal-container={true}
|
||||
class="{size && `bx--modal-container--${size}`}
|
||||
{containerClass}">
|
||||
{containerClass}"
|
||||
on:click={() => {
|
||||
didClickInnerModal = true;
|
||||
}}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue