fix: scroll jump - move scrollIntoView to ComboBoxOption component

UMN-LATIS · Sep 23, 2024 · 0465145 · 0465145
1 parent 962c197
commit 0465145
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 30 deletions.
diff --git 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
@@ -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>