mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(overflowmenu): Allow to keep menu open after clicking items

Browse source
This commit is contained in:
pwwang 2023-07-27 14:32:38 -07:00 • committed by GitHub
commit 070a719150
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/OverflowMenu/OverflowMenu.svelte
View file

@ -55,6 +55,9 @@
/** Obtain a reference to the overflow menu element */ /** Obtain a reference to the overflow menu element */
export let menuRef = null; export let menuRef = null;
/** Persist the open state when click the items */
export let persistentClickItems = true;
import { import {
createEventDispatcher, createEventDispatcher,
getContext, getContext,
@ -202,8 +205,11 @@
class:bx--overflow-menu--xl="{size === 'xl'}" class:bx--overflow-menu--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click="{({ target }) => { on:click="{(e) => {
if (!(menuRef && menuRef.contains(target))) { if (persistentClickItems) {
e.stopPropagation(); // this propagate to window.click to cause close
}
if (!(menuRef && menuRef.contains(e.target))) {
open = !open; open = !open;
if (!open) dispatch('close'); if (!open) dispatch('close');
} }

6
types/OverflowMenu/OverflowMenu.svelte.d.ts vendored
View file

@ -34,6 +34,12 @@ export interface OverflowMenuProps extends RestProps {
*/ */
flipped?: boolean; flipped?: boolean;
/**
* Set to `true` to keep menu open after clicking the items
* @default false
*/
persistentClickItems?: boolean;
/** /**
* Specify the menu options class * Specify the menu options class
* @default undefined * @default undefined