fix(table): sync scroll on filter/sort and remove hover listeners (#348)

globalbrain · Oct 2, 2023 · a4a7e82 · a4a7e82
1 parent 3c7dd6c
commit a4a7e82
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/lib/components/STable.vue b/lib/components/STable.vue
@@ -66,9 +66,6 @@ const cellOfColToGrow = computed(() => {
   return row.value?.children[colToGrow.value]
 })
 
-let headLock = false
-let bodyLock = false
-
 const colWidths = reactive<Record<string, string>>({})
 const blockWidth = ref<number | undefined>()
 
@@ -187,15 +184,18 @@ const virtualizerOptions = computed(() => ({
 const rowVirtualizer = useVirtualizer(virtualizerOptions)
 const virtualItems = computed(() => rowVirtualizer.value.getVirtualItems())
 
-watch(() => props.options.records, () => {
-  headLock = true
-  bodyLock = true
+let isSyncingHead = false
+let isSyncingBody = false
+
+watch(() => unref(props.options.records), () => {
+  isSyncingHead = true
+  isSyncingBody = true
 }, { flush: 'pre' })
 
-watch(() => props.options.records, () => {
+watch(() => unref(props.options.records), () => {
   syncScroll(head.value, body.value)
-  headLock = false
-  bodyLock = false
+  isSyncingHead = false
+  isSyncingBody = false
 }, { flush: 'post' })
 
 useResizeObserver(block, ([entry]) => {
@@ -237,11 +237,19 @@ async function handleResize() {
 }
 
 function syncHeadScroll() {
-  bodyLock || syncScroll(head.value, body.value)
+  if (!isSyncingHead) {
+    isSyncingBody = true
+    syncScroll(head.value, body.value)
+  }
+  isSyncingHead = false
 }
 
 function syncBodyScroll() {
-  headLock || syncScroll(body.value, head.value)
+  if (!isSyncingBody) {
+    isSyncingHead = true
+    syncScroll(body.value, head.value)
+  }
+  isSyncingBody = false
 }
 
 function syncScroll(from: HTMLElement | null, to: HTMLElement | null) {
@@ -250,14 +258,6 @@ function syncScroll(from: HTMLElement | null, to: HTMLElement | null) {
   }
 }
 
-function lockHead(value: boolean) {
-  headLock = value
-}
-
-function lockBody(value: boolean) {
-  bodyLock = value
-}
-
 function updateColWidth(key: string, value: string, triggeredByUser = false) {
   colWidths[key] = value
   if (triggeredByUser && colToGrow.value >= 0) {
@@ -315,8 +315,6 @@ function updateSelected(selected: unknown[]) {
         <div
           class="container head"
           ref="head"
-          @mouseenter="lockHead(true)"
-          @mouseleave="lockHead(false)"
           @scroll="syncHeadScroll"
         >
           <div class="block" ref="block">
@@ -351,8 +349,6 @@ function updateSelected(selected: unknown[]) {
           v-if="!unref(options.loading) && unref(options.records)?.length"
           class="container body"
           ref="body"
-          @mouseenter="lockBody(true)"
-          @mouseleave="lockBody(false)"
           @scroll="syncBodyScroll"
         >
           <div

diff --git a/stories/components/STable.01_Playground.story.vue b/stories/components/STable.01_Playground.story.vue
@@ -67,7 +67,7 @@ const dropdownType = createDropdown([
   {
     type: 'filter',
     search: true,
-    selected: markRaw(dropdownTypeSelected),
+    selected: dropdownTypeSelected,
     options: [
       { label: 'Photo', value: 'Photo', onClick: updateTypeFilter },
       { label: 'Illustration', value: 'Illustration', onClick: updateTypeFilter },
@@ -93,7 +93,7 @@ const dropdownTags = createDropdown([
   {
     type: 'filter',
     search: true,
-    selected: markRaw(dropdownTagsSelected),
+    selected: dropdownTagsSelected,
     options: [
       { label: 'Info', value: 'Info', onClick: updateTagsFilter },
       { label: 'News', value: 'News', onClick: updateTagsFilter },