diff --git a/src/ComposedModal/ComposedModal.Story.svelte b/src/ComposedModal/ComposedModal.Story.svelte
index fe226374..b5073ebd 100644
--- a/src/ComposedModal/ComposedModal.Story.svelte
+++ b/src/ComposedModal/ComposedModal.Story.svelte
@@ -3,12 +3,14 @@
   const { modalBody } = $$props;
 
   import { Button } from "../Button";
+  import { TextInput, PasswordInput } from "../TextInput"
   import ComposedModal from "./ComposedModal.svelte";
   import ModalHeader from "./ModalHeader.svelte";
   import ModalBody from "./ModalBody.svelte";
   import ModalFooter from "./ModalFooter.svelte";
 
-  $: open = false;
+  let open = false;
+  let type = "password";
 </script>
 
 {#if story === undefined}
@@ -17,6 +19,10 @@
     <ModalBody
       {...$$props.modalBody}
       aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
+      <div>
+        <PasswordInput bind:type placeholder="Password Input" aria-level="" />
+        <Button kind="ghost" size="field" on:click="{() => {type = type === 'password' ? 'text' : 'password'}}">Programmatically toggle password</Button>
+      </div>
       <p>
         Please see ModalWrapper for more examples and demo of the functionality.
       </p>
diff --git a/src/Modal/Modal.Story.svelte b/src/Modal/Modal.Story.svelte
index e2bfd54d..a462290a 100644
--- a/src/Modal/Modal.Story.svelte
+++ b/src/Modal/Modal.Story.svelte
@@ -1,8 +1,10 @@
 <script>
   import { Button } from "../Button";
+  import { TextInput, PasswordInput } from "../TextInput"
   import Modal from "./Modal.svelte";
 
   let open = $$props.open;
+  let type = "password";
 </script>
 
 <div>
@@ -29,6 +31,10 @@
   on:submit={() => {
     console.log('submit');
   }}>
+  <div>
+    <PasswordInput bind:type placeholder="Password Input" aria-level="" />
+    <Button kind="ghost" size="field" on:click="{() => {type = type === 'password' ? 'text' : 'password'}}">Programmatically toggle password</Button>
+  </div>
   <p>
     This component supports two-way binding by default. Please see ComposedModal
     for piecemeal functionality.
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 6033eda8..81035b98 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={() => {
+      on:click|stopPropagation={() => {
         type = type === 'password' ? 'text' : 'password';
       }}>
       <span class:bx--assistive-text={true}>