Repository: melt-ui/melt-ui
Pull request #765 (2023-11-24 19:44:14)

fix: popover trigger toggle
Closes: #763 

Test case added as well.

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: ab9e0cd232178c25d9fb0f008b1674da7d9b227f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/huntabyte/melt-ui/new/fix/763?filename=.changeset/clever-bananas-cheer.md&value=---%0A%22%40melt-ui%2Fsvelte%22%3A%20patch%0A---%0A%0Afix%3A%20popover%20trigger%20toggle%0A)



Patch:
diff --git a/.changeset/clever-bananas-cheer.md b/.changeset/clever-bananas-cheer.md
new file mode 100644
index 00000000..db602e72
--- /dev/null
+++ b/.changeset/clever-bananas-cheer.md
@@ -0,0 +1,5 @@
+---
+"@melt-ui/svelte": patch
+---
+
+Popover: Fix trigger not toggling the `open` state (closes #763)
diff --git a/src/docs/content/builders/dialog.md b/src/docs/content/builders/dialog.md
index a05f4fd7..bbb28684 100644
--- a/src/docs/content/builders/dialog.md
+++ b/src/docs/content/builders/dialog.md
@@ -27,7 +27,7 @@ At a high level, the anatomy of a dialog looks like this:
 
 <button use:melt={$trigger}> Open Dialog </button>
 
-<div use:portal>
+<div use:melt={$portalled}>
 	{#if $open}
 		<div use:melt={$overlay} />
 		<div use:melt={$content}>
diff --git a/src/docs/data/builders/menu.ts b/src/docs/data/builders/menu.ts
index 0ca3c463..70bd252e 100644
--- a/src/docs/data/builders/menu.ts
+++ b/src/docs/data/builders/menu.ts
@@ -91,6 +91,18 @@ function getMenuBuilderEls(name = 'menu') {
 			name: 'arrow',
 			description: `The builder store used to create the ${name} arrow.`,
 		},
+		{
+			name: 'item',
+			description: `The builder store used to create the ${name} item`,
+		},
+		{
+			name: 'group',
+			description: `The builder store used to group menu items together. It takes in a unique key to group menu items together.`,
+		},
+		{
+			name: 'groupLabel',
+			description: `The builder store used to create the group label for the ${name}.`,
+		},
 	];
 }
 
diff --git a/src/lib/builders/popover/create.ts b/src/lib/builders/popover/create.ts
index 01833f03..29cd6ceb 100644
--- a/src/lib/builders/popover/create.ts
+++ b/src/lib/builders/popover/create.ts
@@ -8,6 +8,7 @@ import {
 	getPortalDestination,
 	handleFocus,
 	isBrowser,
+	isElement,
 	isHTMLElement,
 	kbd,
 	noop,
@@ -139,7 +140,9 @@ export function createPopover(args?: CreatePopoverProps) {
 								  },
 							clickOutside: $closeOnOutsideClick
 								? {
-										handler: () => {
+										handler: (e) => {
+											const target = e.target;
+											if (isElement(target) && target.id === get(ids.trigger)) return;
 											handleClose();
 										},
 								  }


Test patch:
diff --git a/src/tests/popover/Popover.spec.ts b/src/tests/popover/Popover.spec.ts
index b4f83388..ed5cf928 100644
--- a/src/tests/popover/Popover.spec.ts
+++ b/src/tests/popover/Popover.spec.ts
@@ -57,6 +57,16 @@ describe('Popover (Default)', () => {
 		await waitFor(() => expect(content).not.toBeVisible());
 	});
 
+	test('Toggles open state on trigger click', async () => {
+		const { content, trigger, user } = setup();
+
+		expect(content).not.toBeVisible();
+		await user.click(trigger);
+		await waitFor(() => expect(content).toBeVisible());
+		await user.click(trigger);
+		await waitFor(() => expect(content).not.toBeVisible());
+	});
+
 	test('Respects `openFocus` prop', async () => {
 		const { content, trigger, user, getByTestId } = setup({
 			openFocus: () => {