fix: interact outside transition out bug during unmounting melt-ui#1005…

… (melt-ui#1006) Co-authored-by: Thomas G. Lopes <26071571+TGlide@users.noreply.github.com>
abdel-17 · Feb 26, 2024 · 4e1ec4a · 4e1ec4a
1 parent 811f751
commit 4e1ec4a
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git a/.changeset/silver-rivers-draw.md b/.changeset/silver-rivers-draw.md
@@ -0,0 +1,5 @@
+---
+'@melt-ui/svelte': patch
+---
+
+Fixed bug where on outside interaction in several components (popover, menu, link preview, tooltip, listbox), on component unmount, the content jumps during out transition if content was mounted in an else if block (closes #1005)
diff --git a/src/lib/builders/link-preview/create.ts b/src/lib/builders/link-preview/create.ts
@@ -195,7 +195,9 @@ export function createLinkPreview(props: CreateLinkPreviewProps = {}) {
 							floating: $positioning,
 							clickOutside: $closeOnOutsideClick
 								? {
-										handler: (e) => {
+										handler: async (e) => {
+											await sleep(0);
+
 											onOutsideClick.get()?.(e);
 											if (e.defaultPrevented) return;
 

diff --git a/src/lib/builders/listbox/create.ts b/src/lib/builders/listbox/create.ts
@@ -32,6 +32,7 @@ import {
 	prev,
 	removeHighlight,
 	removeScroll,
+	sleep,
 	stripValues,
 	styleToString,
 	toWritableStores,
@@ -226,7 +227,8 @@ export function createListbox<
 	}
 
 	/** Closes the menu & clears the active trigger */
-	function closeMenu() {
+	async function closeMenu() {
+		await sleep(0);
 		open.set(false);
 		highlightedItem.set(null);
 	}

diff --git a/src/lib/builders/menu/create.ts b/src/lib/builders/menu/create.ts
@@ -192,7 +192,9 @@ export function createMenuBuilder(opts: _MenuBuilderOptions) {
 								floating: $positioning,
 								clickOutside: $closeOnOutsideClick
 									? {
-											handler: (e) => {
+											handler: async (e) => {
+												await sleep(0);
+
 												onOutsideClick.get()?.(e);
 												if (e.defaultPrevented) return;
 

diff --git a/src/lib/builders/popover/create.ts b/src/lib/builders/popover/create.ts
@@ -17,6 +17,7 @@ import {
 	removeScroll,
 	styleToString,
 	toWritableStores,
+	sleep,
 } from '$lib/internal/helpers/index.js';
 
 import { usePopper } from '$lib/internal/actions/index.js';
@@ -81,7 +82,8 @@ export function createPopover(args?: CreatePopoverProps) {
 		activeTrigger.set(document.getElementById(ids.trigger.get()));
 	});
 
-	function handleClose() {
+	async function handleClose() {
+		await sleep(0);
 		open.set(false);
 		const triggerEl = document.getElementById(ids.trigger.get());
 		handleFocus({ prop: closeFocus.get(), defaultEl: triggerEl });

diff --git a/src/lib/builders/tooltip/create.ts b/src/lib/builders/tooltip/create.ts
@@ -18,6 +18,7 @@ import {
 	pointInPolygon,
 	styleToString,
 	toWritableStores,
+	sleep,
 } from '$lib/internal/helpers/index.js';
 
 import { useFloating, usePortal } from '$lib/internal/actions/index.js';
@@ -179,7 +180,10 @@ export function createTooltip(props?: CreateTooltipProps) {
 					if (clickedTrigger) return;
 					openTooltip('focus');
 				}),
-				addMeltEventListener(node, 'blur', () => closeTooltip(true)),
+				addMeltEventListener(node, 'blur', async () => {
+					await sleep(0);
+					closeTooltip(true);
+				}),
 				addMeltEventListener(node, 'keydown', keydownHandler),
 				addEventListener(document, 'keydown', keydownHandler)
 			);