[UBER-129] Fix scroll after collapsing a list header (#3330)

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

packages/ui/src/components/Scroller.svelte

@@ -453,6 +453,14 @@
       ? 'visible'
       : 'hidden'
   let scrollY: number = 0
+
+  let safariScrollJumpfix: boolean = true
+  export const enableSafariScrollJumpFix = (enable: boolean): void => {
+    if (enable) {
+      scrollY = divScroll?.scrollTop ?? 0
+    }
+    safariScrollJumpfix = enable
+  }
 </script>
 
 <svelte:window on:resize={_resize} />
@@ -476,24 +484,25 @@
       }}
       class="scroll relative flex-shrink"
       style:overflow-x={horizontal ? 'auto' : 'hidden'}
-      on:scroll={(evt) => {
+      on:scroll={() => {
         if ($tooltipstore.label !== undefined) closeTooltip()
-        const newPos = divScroll?.scrollTop ?? 0
 
         // TODO: Workaround: https://front.hc.engineering/workbench/platform/tracker/TSK-760
         // In Safari scroll could jump on click, with no particular reason.
-
+        if (safariScrollJumpfix) {
-        if (
+          const newPos = divScroll?.scrollTop ?? 0
-          !scrolling &&
+          if (
-          !isScrolling &&
+            !scrolling &&
-          scrollY !== 0 &&
+            !isScrolling &&
-          Math.abs(newPos - scrollY) > 100 &&
+            scrollY !== 0 &&
-          divScroll !== undefined &&
+            Math.abs(newPos - scrollY) > 100 &&
-          isSafari()
+            divScroll !== undefined &&
-        ) {
+            isSafari()
-          divScroll.scrollTop = scrollY
+          ) {
+            divScroll.scrollTop = scrollY
+          }
+          scrollY = divScroll?.scrollTop ?? 0
         }
-        scrollY = divScroll?.scrollTop ?? 0
       }}
     >
       <div

plugins/view-resources/src/components/list/List.svelte

@@ -148,6 +148,7 @@
     on:select-prev={(evt) => {
       select(-2, evt.detail)
     }}
+    on:collapsed
   />
 </div>
 

plugins/view-resources/src/components/list/ListCategories.svelte

@@ -319,6 +319,7 @@
         index: e.detail.index + getInitIndex(categories, i)
       })
     }}
+    on:collapsed
     {flatHeaders}
     {disableHeader}
     {props}

plugins/view-resources/src/components/list/ListCategory.svelte

@@ -390,6 +390,7 @@
               $focusStore = { provider: $focusStore.provider }
             }
           }
+          dispatch('collapsed', { div })
         }
         localStorage.setItem(categoryCollapseKey, collapsed ? 'true' : 'false')
       }}
@@ -460,11 +461,6 @@
 </div>
 
 <style lang="scss">
-  .expandCollapse {
-    overflow: hidden;
-    transition: height 0.3s ease-out;
-    height: auto;
-  }
   .zero-container {
     border-radius: 0.25rem;
 

plugins/view-resources/src/components/list/ListHeader.svelte

@@ -198,7 +198,6 @@
 
 <style lang="scss">
   .categoryHeader {
-    position: relative;
     position: sticky;
     top: 0;
     padding: 0 2.5rem 0 0.75rem;

plugins/view-resources/src/components/list/ListView.svelte

@@ -21,6 +21,7 @@
   export let props: Record<string, any> = {}
 
   let list: List
+  let scroll: Scroller
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
     if (dir === 'vertical') {
@@ -42,6 +43,7 @@
 
 <div class="w-full h-full py-4 clear-mins">
   <Scroller
+    bind:this={scroll}
     fade={{ multipler: { top: 2.75 * viewOptions.groupBy.length, bottom: 0 } }}
     padding={'0 1rem'}
     noFade
@@ -67,8 +69,13 @@
       on:check={(event) => {
         listProvider.updateSelection(event.detail.docs, event.detail.value)
       }}
-      on:content={(evt) => {
+      on:content={(event) => {
-        listProvider.update(evt.detail)
+        listProvider.update(event.detail)
+      }}
+      on:collapsed={(event) => {
+        scroll.enableSafariScrollJumpFix(false)
+        event.detail.div.scrollIntoView(true)
+        scroll.enableSafariScrollJumpFix(true)
       }}
     />
   </Scroller>