Merge pull request #6317 from nocodb/fix/view-scroll-and-auto-scroll

Fixed view scroll not coming and auto scroll on active view

packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue

@@ -297,13 +297,38 @@ const setIcon = async (icon: string, view: ViewType) => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+const scrollViewNode = () => {
+  const activeViewDom = document.querySelector(`.nc-views-menu [data-view-id="${activeView.value?.id}"]`) as HTMLElement
+  if (!activeViewDom) return
+
+  if (isElementInvisible(activeViewDom)) {
+    // Scroll to the view node
+    activeViewDom?.scrollIntoView({ behavior: 'auto', inline: 'start' })
+  }
+}
+
+watch(
+  () => activeView.value?.id,
+  () => {
+    if (!activeView.value?.id) return
+
+    // TODO: Find a better way to scroll to the view node
+    setTimeout(() => {
+      scrollViewNode()
+    }, 800)
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 
 <template>
   <a-menu
     ref="menuRef"
     :class="{ dragging }"
-    class="nc-views-menu flex flex-col !ml-3 !mr-2.5 w-full !border-r-0 !bg-inherit nc-scrollbar-md"
+    class="nc-views-menu flex flex-col !ml-3 w-full !border-r-0 !bg-inherit"
     :selected-keys="selected"
   >
     <!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
@@ -319,6 +344,7 @@ const setIcon = async (icon: string, view: ViewType) => {
         'active': activeView?.id === view.id,
         [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
       }"
+      :data-view-id="view.id"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
       @delete="openDeleteDialog"

packages/nc-gui/components/smartsheet/sidebar/index.vue

@@ -186,7 +186,7 @@ function onOpenModal({
 
     <div class="flex-1 flex flex-col min-h-0">
       <div class="flex flex-col h-full justify-between w-full">
-        <div class="flex flex-grow w-full">
+        <div class="flex flex-grow nc-scrollbar-md pr-1.75 mr-0.5">
           <div v-if="isViewsLoading" class="flex flex-col w-full">
             <div class="flex flex-row items-center w-full mt-1.5 ml-5 gap-x-3">
               <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />

packages/nc-gui/utils/domUtils.ts

@@ -1,6 +1,5 @@
-const isElementInvisible = (el: HTMLElement | Element) => {
+const isElementInvisible = (elem: HTMLElement) => {
-  const rect = el.getBoundingClientRect()
+  return !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length)
-  return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight
 }
 
 export { isElementInvisible }