Bugfix/#2867 Fixes popup disappearing in Input Autocompete (#2937)

.changeset/seven-avocados-clean.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: fix popup disappearing when dragging mouse out of the input box

packages/skeleton/src/lib/utilities/Popup/popup.ts

@@ -136,14 +136,22 @@ export function popup(triggerNode: HTMLElement, args: PopupSettings) {
 	function toggle(): void {
 		popupState.open === false ? open() : close();
 	}
+
+	function handleMouseUp(event: MouseEvent) {
+		if (!triggerNode.contains(event.target as Node)) close();
+	}
+
 	function onWindowClick(event: any): void {
 		// Return if the popup is not yet open
 		if (popupState.open === false) return;
 		// Return if click is the trigger element
 		if (triggerNode.contains(event.target)) return;
 		// If click it outside the popup
 		if (elemPopup && elemPopup.contains(event.target) === false) {
-			close();
+			const selection = window.getSelection();
+			if (selection && selection.toString().length == 0) {
+				close();
+			}
 			return;
 		}
 		// Handle Close Query State
@@ -187,6 +195,7 @@ export function popup(triggerNode: HTMLElement, args: PopupSettings) {
 	switch (args.event) {
 		case 'click':
 			triggerNode.addEventListener('click', toggle, true);
+			window.addEventListener('mouseup', handleMouseUp, true);
 			window.addEventListener('click', onWindowClick, true);
 			break;
 		case 'hover':
@@ -228,6 +237,7 @@ export function popup(triggerNode: HTMLElement, args: PopupSettings) {
 			triggerNode.removeEventListener('blur', () => close(), true);
 			// Window Events
 			window.removeEventListener('click', onWindowClick, true);
+			window.removeEventListener('mouseup', handleMouseUp, true);
 			window.removeEventListener('keydown', onWindowKeyDown, true);
 		}
 	};

packages/skeleton/src/lib/utilities/Toast/Toast.test.ts

@@ -58,7 +58,7 @@ describe('Toast.svelte', () => {
 		const [wrapperVisibilityOnAToBChange, wrapperVisibilityAfterAOutroFinishes, wrapperVisibilityAfterBOutroFinishes] = await Promise.all([
 			getWrapperElementAfterTimeout(10),
 			getWrapperElementAfterTimeout(16),
-			getWrapperElementAfterTimeout(50)
+			getWrapperElementAfterTimeout(80)
 		]);
 
 		expect(wrapperVisibilityOnAToBChange).toBeTruthy();