From 0465145c3c8b42529675de3c46c1f569caacf51c Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Mon, 23 Sep 2024 16:11:12 -0500
Subject: [PATCH] fix: scroll jump - move scrollIntoView to ComboBoxOption
 component

---
 resources/js/components/ComboBox/ComboBox.vue | 28 -------------------
 .../js/components/ComboBox/ComboBoxOption.vue | 25 +++++++++++++++--
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/resources/js/components/ComboBox/ComboBox.vue b/resources/js/components/ComboBox/ComboBox.vue
index 66f5c1ab..d32a9153 100644
--- a/resources/js/components/ComboBox/ComboBox.vue
+++ b/resources/js/components/ComboBox/ComboBox.vue
@@ -339,34 +339,6 @@ watch(query, () => {
     : first(filteredOptions.value) ?? null;
 });
 
-// make sure the highlighted option is always in view
-watch(
-  [areOptionsOpen, highlightedOption],
-  () => {
-    nextTick(() => {
-      if (!areOptionsOpen.value || !highlightedOption.value) {
-        return;
-      }
-
-      const highlightedOptionRef = document
-        .getElementById(`combobox-${props.label}__options`)
-        ?.querySelector(`[data-highlighted-option="true"]`);
-
-      if (!highlightedOptionRef) {
-        return;
-      }
-
-      if (highlightedOptionRef) {
-        highlightedOptionRef.scrollIntoView({
-          block: "nearest",
-          inline: "nearest",
-        });
-      }
-    });
-  },
-  { immediate: true },
-);
-
 const { floatingStyles } = useFloating(
   comboboxContainerRef,
   comboboxOptionsRef,
diff --git a/resources/js/components/ComboBox/ComboBoxOption.vue b/resources/js/components/ComboBox/ComboBoxOption.vue
index 86dcda8f..287bd533 100644
--- a/resources/js/components/ComboBox/ComboBoxOption.vue
+++ b/resources/js/components/ComboBox/ComboBoxOption.vue
@@ -1,5 +1,9 @@
 <template>
-  <li :id="`option-${option.id ?? option.label}`" class="tw-list-none">
+  <li
+    :id="`option-${option.id ?? option.label}`"
+    ref="currentOption"
+    class="tw-list-none"
+  >
     <div
       class="tw-flex tw-justify-between tw-items-center tw-rounded-md tw-cursor-pointer"
       :class="{
@@ -30,11 +34,28 @@
 <script setup lang="ts">
 import CircleCheckIcon from "@/icons/CircleCheckIcon.vue";
 import { ComboBoxOptionType } from ".";
+import { watch, ref } from "vue";
 
-defineProps<{
+const props = defineProps<{
   option: ComboBoxOptionType;
   isSelected: boolean;
   isHighlighted: boolean;
 }>();
+
+const currentOption = ref<HTMLElement | null>(null);
+
+watch(
+  [() => props.isHighlighted],
+  () => {
+    if (!props.isHighlighted) return;
+
+    // make sure if the current option is highlighted, it's in vue of the scroll container
+    currentOption.value?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  },
+  { immediate: true },
+);
 </script>
 <style scoped></style>