use theetrain requested change with

`svelte:window` instead of `mousedown` and `blur`

src/Dropdown/Dropdown.svelte

@@ -98,7 +98,7 @@
   /** Obtain a reference to the button HTML element */
   export let ref = null;
 
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import WarningFilled from "../icons/WarningFilled.svelte";
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
   import {
@@ -111,6 +111,7 @@
   const dispatch = createEventDispatcher();
 
   let highlightedIndex = -1;
+  let mainDivRef;
 
   $: inline = type === "inline";
   $: selectedItem = items.find((item) => item.id === selectedId);
@@ -148,9 +149,24 @@
   const dispatchSelect = () => {
     dispatch("select", { selectedId, selectedItem });
   };
+
+  const pageClickHandler = ({ target }) => {
+    if (open && ref && !ref.contains(target)) {
+      open = false;
+    }
+  };
+
+  onMount(() => {
+    if (parent) {
+      parent.addEventListener("click", pageClickHandler);
+    }
+  });
 </script>
 
+<svelte:window on:click="{pageClickHandler}" />
+
 <div
+  bind:this="{mainDivRef}"
   class:bx--dropdown__wrapper="{true}"
   class:bx--list-box__wrapper="{true}"
   class:bx--dropdown__wrapper--inline="{inline}"
@@ -237,7 +253,6 @@
           open = false;
         }
       }}"
-      on:blur="{() => (open = false)}"
       on:keyup="{(e) => {
         const { key } = e;
         if ([' '].includes(key)) {
@@ -281,7 +296,7 @@
             active="{selectedId === item.id}"
             highlighted="{highlightedIndex === i}"
             disabled="{item.disabled}"
-            on:mousedown="{(e) => {
+            on:click="{(e) => {
               if (item.disabled) {
                 e.stopPropagation();
                 return;

src/ListBox/ListBoxMenuItem.svelte

@@ -27,7 +27,6 @@
   disabled="{disabled ? true : undefined}"
   {...$$restProps}
   on:click
-  on:mousedown
   on:mouseenter
   on:mouseleave
 >