20592 Fix recipe area scrolling too far when expanding list (#1449)

* fix scrolling to conflict lists * bump version
bcgov · Apr 22, 2024 · ca4d5b4 · ca4d5b4
1 parent e5c9f96
commit ca4d5b4
Show file tree

Hide file tree

Showing 4 changed files with 279 additions and 415 deletions.
diff --git a/components/Accordion.vue b/components/Accordion.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{ 'pointer-events-none': disabled }">
     <button
-      class="flex w-full items-center justify-between rounded p-1 text-left text-sm font-medium outline-none transition"
+      class="accordion-title flex w-full items-center justify-between rounded p-1 text-left text-sm font-medium outline-none transition"
       :class="buttonStyle"
       @click="onTitleClick"
     >

diff --git a/components/examine/recipe/conflicts/Bucket.vue b/components/examine/recipe/conflicts/Bucket.vue
@@ -46,13 +46,18 @@ const props = defineProps<{
 
 const listElems = ref<Array<InstanceType<typeof Accordion>>>([])
 
-emitter.on('scrollToConflictObject', ({ obj, instant }) => {
+emitter.on('scrollToConflictObject', async ({ obj, instant }) => {
   if (isConflictList(obj) && props.conflictLists?.includes(obj)) {
     const index = props.conflictLists.indexOf(obj)
-    listElems.value[index].$el?.scrollIntoView({
-      behavior: instant ? 'instant' : 'smooth',
-      block: 'center',
-    })
+    const element = listElems.value[index].$el as HTMLElement
+    await nextTick()
+    element
+      .getElementsByClassName('accordion-title')
+      .item(0)
+      ?.scrollIntoView({
+        behavior: instant ? 'instant' : 'smooth',
+        block: 'center',
+      })
   }
 })
 </script>