From 3614877964ad067f2783b5413ff0f1d78abd647c Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Fri, 26 Nov 2021 07:22:06 +0530 Subject: [PATCH] fix: broken scroll to definition in graphql documentation --- .../components/graphql/Sidebar.vue | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue index 7e94c35dd..d74407109 100644 --- a/packages/hoppscotch-app/components/graphql/Sidebar.vue +++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue @@ -410,12 +410,25 @@ const handleJumpToType = async (type: GraphQLType) => { await nextTick() const rootTypeName = resolveRootType(type).name - const target = document.getElementById(`type_${rootTypeName}`) if (target) { - gqlTabs.value.$el - .querySelector(".gqlTabs") - .scrollTo({ top: target.offsetTop, behavior: "smooth" }) + target.scrollIntoView({ block: "center", behavior: "smooth" }) + target.classList.add( + "transition-all", + "ring-inset", + "ring-accentLight", + "ring-4" + ) + setTimeout( + () => + target.classList.remove( + "ring-inset", + "ring-accentLight", + "ring-4", + "transition-all" + ), + 2000 + ) } }