From 52a10d3acd0dd895848211ea3d557f2e14c6b2e1 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 12 Aug 2020 12:46:07 -0700
Subject: [PATCH] fix(modal): prevent clicking inside inner modal from closing
 the modal

- revert adding a `stopPropagation` modifier to the PasswordInput "toggle password" button
---
 src/ComposedModal/ComposedModal.Story.svelte |  4 +++-
 src/ComposedModal/ComposedModal.svelte       | 13 ++++++++-----
 src/Modal/Modal.Story.svelte                 |  3 +++
 src/Modal/Modal.svelte                       | 13 ++++++++-----
 src/TextInput/PasswordInput.svelte           |  2 +-
 5 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/ComposedModal/ComposedModal.Story.svelte b/src/ComposedModal/ComposedModal.Story.svelte
index b5073ebd..0267b289 100644
--- a/src/ComposedModal/ComposedModal.Story.svelte
+++ b/src/ComposedModal/ComposedModal.Story.svelte
@@ -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}
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index cb168262..ea942ba9 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -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>
diff --git a/src/Modal/Modal.Story.svelte b/src/Modal/Modal.Story.svelte
index a462290a..6c63be6d 100644
--- a/src/Modal/Modal.Story.svelte
+++ b/src/Modal/Modal.Story.svelte
@@ -18,6 +18,9 @@
 <Modal
   {...$$props}
   bind:open
+  on:click={(e) => {
+    console.log(e.target)
+  }}
   on:click:button--secondary={() => {
     console.log('click button secondary');
     open = false;
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 7afc6c68..d42e27e7 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -110,6 +110,7 @@
   let buttonRef = null;
   let innerModal = null;
   let opened = false;
+  let didClickInnerModal = false;
 
   function focus(element) {
     const node =
@@ -165,10 +166,9 @@
     }
   }}
   on:click
-  on:click={({ target }) => {
-    if (!innerModal.contains(target)) {
-      open = false;
-    }
+  on:click={() => {
+    if (!didClickInnerModal) open = false;
+    didClickInnerModal = false;
   }}
   on:mouseover
   on:mouseenter
@@ -179,7 +179,10 @@
     aria-modal="true"
     aria-label={ariaLabel}
     class:bx--modal-container={true}
-    class={size && `bx--modal-container--${size}`}>
+    class={size && `bx--modal-container--${size}`}
+    on:click={() => {
+      didClickInnerModal = true;
+    }}>
     <div class:bx--modal-header={true}>
       {#if passiveModal}
         <button
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 81035b98..6033eda8 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -177,7 +177,7 @@
       class:bx--tooltip--a11y={true}
       class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
       {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
-      on:click|stopPropagation={() => {
+      on:click={() => {
         type = type === 'password' ? 'text' : 'password';
       }}>
       <span class:bx--assistive-text={true}>