From 070a719150c59cac20907a0d6326f570f36fcc3a Mon Sep 17 00:00:00 2001 From: pwwang <1188067+pwwang@users.noreply.github.com> Date: Thu, 27 Jul 2023 14:32:38 -0700 Subject: [PATCH] feat(overflowmenu): Allow to keep menu open after clicking items --- src/OverflowMenu/OverflowMenu.svelte | 10 ++++++++-- types/OverflowMenu/OverflowMenu.svelte.d.ts | 6 ++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index fbc331fd56..aed0528099 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, @@ -202,8 +205,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 894ca6ca4a..a7197042b8 100644 --- a/types/OverflowMenu/OverflowMenu.svelte.d.ts +++ b/types/OverflowMenu/OverflowMenu.svelte.d.ts @@ -34,6 +34,12 @@ export interface OverflowMenuProps extends RestProps { */ flipped?: boolean; + /** + * Set to `true` to keep menu open after clicking the items + * @default false + */ + persistentClickItems?: boolean; + /** * Specify the menu options class * @default undefined