Merge pull request #231 from IBM/fix-modal

fix(modal): prevent clicking inside inner modal from closing the modal

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}

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 }) => {
+  on:click={() => {
-    if (!innerModal.contains(target)) {
+    if (!didClickInnerModal) open = false;
-      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>

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;

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 }) => {
+  on:click={() => {
-    if (!innerModal.contains(target)) {
+    if (!didClickInnerModal) open = false;
-      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

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}>