diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index b8052252..ad8e38a6 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -55,6 +55,9 @@ /** Obtain a reference to the overflow menu element */ export let menuRef = null; + /** Persist the open state when click the items */ + export let persistentClickItems = true; + import { createEventDispatcher, getContext, @@ -203,8 +206,11 @@ class:bx--overflow-menu--xl="{size === 'xl'}" {...$$restProps} on:click - on:click="{({ target }) => { - if (!(menuRef && menuRef.contains(target))) { + on:click="{(e) => { + if (persistentClickItems) { + e.stopPropagation(); // this propagate to window.click to cause close + } + if (!(menuRef && menuRef.contains(e.target))) { open = !open; if (!open) dispatch('close'); } diff --git a/types/OverflowMenu/OverflowMenu.svelte.d.ts b/types/OverflowMenu/OverflowMenu.svelte.d.ts index 7a6426b8..9917bbc6 100644 --- a/types/OverflowMenu/OverflowMenu.svelte.d.ts +++ b/types/OverflowMenu/OverflowMenu.svelte.d.ts @@ -34,6 +34,12 @@ type $Props = { */ flipped?: boolean; + /** + * Set to `true` to keep menu open after clicking the items + * @default false + */ + persistentClickItems?: boolean; + /** * Specify the menu options class * @default undefined