From 6f05406e9d089882c5b8414fc4166cea178ad8d0 Mon Sep 17 00:00:00 2001
From: wheezard <90904039+wheezard@users.noreply.github.com>
Date: Sun, 29 May 2022 19:07:33 +0300
Subject: [PATCH] fixed the combobox positioning issue

---
 src/lib/ComboBox/ComboBox.svelte | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/lib/ComboBox/ComboBox.svelte b/src/lib/ComboBox/ComboBox.svelte
index ad0179b..4f22b12 100644
--- a/src/lib/ComboBox/ComboBox.svelte
+++ b/src/lib/ComboBox/ComboBox.svelte
@@ -94,17 +94,34 @@
 
 	let inputFocused = false;
 	let itemHeight = 36;
+	const maxItems = 14; // 504 (`max-block-size` in ComboBox.scss) / 36 (itemHeight)
 	let menuOffset =
-		itemHeight * -(selection ? items.indexOf(selection) : Math.floor(items.length / 2));
+		itemHeight * -(selection ? items.indexOf(selection) : Math.floor(items.length > maxItems ? (maxItems / 2) : items.length / 2));
 
 	onMount(() => {
 		if (!searchValue) searchValue = value;
 	});
 
 	function updateOffset(target: HTMLElement) {
-		menuOffset = -(
-			target.offsetTop - parseInt(getComputedStyle(target).getPropertyValue("margin-top"))
-		);
+		requestAnimationFrame(() => {
+			// this literally moves the menu so that the `containerElement` matches `target`
+			let { top: containerTop } = containerElement.getBoundingClientRect();
+			let { top: targetTop } = target.getBoundingClientRect();
+	
+			menuOffset += containerTop - targetTop;
+
+			/* This will also make sure that the `menuElement` can't go beyond the top of the page
+			requestAnimationFrame(() => {
+				let { top } = menuElement.getBoundingClientRect()
+
+				if (top < 0) {
+					menuOffset += -top
+				}
+
+				// Not sure how to do this for bottom
+			})
+			*/
+		})
 	}
 
 	function selectItem(item: Item) {