feat: improve menu option scroll into viewport

Author: TotomInc

src/MenuOption.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from "vue";
+import { ref, watch } from "vue";
 
 const props = defineProps<{
+  menu: HTMLDivElement | null;
+  index: number;
   isFocused: boolean;
   isSelected: boolean;
 }>();
@@ -15,15 +17,24 @@ const option = ref<HTMLButtonElement | null>(null);
 // Scroll the focused option into view when it's out of the menu's viewport.
 watch(
   () => props.isFocused,
-  async () => {
-    if (props.isFocused) {
-      // Use nextTick to wait for the next DOM render.
-      await nextTick(() => {
-        option.value?.parentElement?.scrollTo({
-          top: option.value?.offsetTop - option.value?.parentElement?.offsetHeight + option.value?.offsetHeight,
-          behavior: "instant",
-        });
-      });
+  () => {
+    if (props.isFocused && props.menu) {
+      // Get child element with index
+      const option = props.menu.children[props.index] as HTMLDivElement;
+
+      const optionTop = option.offsetTop;
+      const optionBottom = optionTop + option.clientHeight;
+      const menuScrollTop = props.menu.scrollTop;
+      const menuHeight = props.menu.clientHeight;
+
+      if (optionTop < menuScrollTop) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.menu.scrollTop = optionTop;
+      }
+      else if (optionBottom > menuScrollTop + menuHeight) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.menu.scrollTop = optionBottom - menuHeight;
+      }
     }
   },
 );

src/Select.vue

@@ -98,8 +98,9 @@ const selected = defineModel<string | string[]>({
   },
 });
 
-const container = ref<HTMLElement | null>(null);
+const container = ref<HTMLDivElement | null>(null);
 const input = ref<HTMLInputElement | null>(null);
+const menu = ref<HTMLDivElement | null>(null);
 
 const search = ref("");
 const menuOpen = ref(false);
@@ -384,6 +385,7 @@ onBeforeUnmount(() => {
     <Teleport :to="teleport" :disabled="!teleport">
       <div
         v-if="menuOpen"
+        ref="menu"
         class="menu"
         role="listbox"
         :aria-label="aria?.labelledby"
@@ -400,6 +402,8 @@ onBeforeUnmount(() => {
           type="button"
           class="menu-option"
           :class="{ focused: focusedOption === i, selected: option.value === selected }"
+          :menu="menu"
+          :index="i"
           :is-focused="focusedOption === i"
           :is-selected="option.value === selected"
           @select="setOption(option.value)"