diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index c64e9708..53de945d 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/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);
+ }
+ });
+