From 4e1ec4a727ea865f7926ebdf5a8c0f524006d2c7 Mon Sep 17 00:00:00 2001
From: Anatol Zakrividoroga <53095479+anatolzak@users.noreply.github.com>
Date: Mon, 26 Feb 2024 19:41:17 +0200
Subject: [PATCH] fix: interact outside transition out bug during unmounting 
 #1005 (#1006)

Co-authored-by: Thomas G. Lopes <26071571+TGlide@users.noreply.github.com>
---
 .changeset/silver-rivers-draw.md        | 5 +++++
 src/lib/builders/link-preview/create.ts | 4 +++-
 src/lib/builders/listbox/create.ts      | 4 +++-
 src/lib/builders/menu/create.ts         | 4 +++-
 src/lib/builders/popover/create.ts      | 4 +++-
 src/lib/builders/tooltip/create.ts      | 6 +++++-
 6 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/silver-rivers-draw.md

diff --git a/.changeset/silver-rivers-draw.md b/.changeset/silver-rivers-draw.md
new file mode 100644
index 0000000000..6d1be2f7a1
--- /dev/null
+++ 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
index 5ab7d08b45..872cb83954 100644
--- 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
index 705466a963..41f9b788e1 100644
--- 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
index 79b6481a00..f5603dd690 100644
--- 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
index 8fa0b2f5c7..18781aadce 100644
--- 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
index a4383ddb4f..61425e2943 100644
--- 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)
 			);