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); + } + }); + +
{ if (item.disabled) { e.stopPropagation(); return; diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte index ea5e5707..c0ce7ea2 100644 --- a/src/ListBox/ListBoxMenuItem.svelte +++ b/src/ListBox/ListBoxMenuItem.svelte @@ -27,7 +27,6 @@ disabled="{disabled ? true : undefined}" {...$$restProps} on:click - on:mousedown on:mouseenter on:mouseleave >