fix(data-table): header and body's scrolling not sync when using the …

…keyboard, closes tusen-ai#3941 (tusen-ai#4051) Co-authored-by: 07akioni <[email protected]>
ssuperlilei · Jun 19, 2023 · e181f9c · e181f9c
1 parent 8900300
commit e181f9c
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 50 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -22,6 +22,7 @@
 - Fix `n-input` doesn't display the horizontal scroll bar when `type` is `textarea`, closes [#4570](https://github.com/tusen-ai/naive-ui/issues/4570).
 - Fix `n-alert`'s content style problem, when there is no title and use closable, closes [#4588](https://github.com/tusen-ai/naive-ui/issues/4588).
 - Fix `n-select`'s `empty` slot action then it is an interactive component, closes [#4700](https://github.com/tusen-ai/naive-ui/issues/4700).
+- Fix `n-data-table` header and body's scrolling are not sync when using the keyboard, closes [#3941](https://github.com/tusen-ai/naive-ui/issues/3941).
 
 ### Features
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -22,6 +22,7 @@
 - 修复 `n-input` 当 `type` 为 `textarea` 时不显示纵向滚动条的问题，关闭 [#4570](https://github.com/tusen-ai/naive-ui/issues/4570)
 - 修复 `n-alert` 在没有标题且可关闭时，内容样式出现的问题，关闭 [#4588](https://github.com/tusen-ai/naive-ui/issues/4588)
 - 修复 `n-select` 的 `empty` slot 为可交互组件时的行为，关闭 [#4700](https://github.com/tusen-ai/naive-ui/issues/4700)
+- 修复 `n-data-table` 使用按键滚动时 header 和 body 不同步，关闭 [#3941](https://github.com/tusen-ai/naive-ui/issues/3941)
 
 ### Features
 

diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx
@@ -7,8 +7,7 @@ import {
   toRef,
   type CSSProperties,
   Transition,
-  watchEffect,
-  onDeactivated
+  watchEffect
 } from 'vue'
 import { createId } from 'seemly'
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
@@ -86,10 +85,6 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     const bodyWidthRef = ref<number | null>(null)
-    const scrollPartRef = ref<'head' | 'body'>('body')
-    onDeactivated(() => {
-      scrollPartRef.value = 'body'
-    })
     const mainTableInstRef = ref<MainTableRef | null>(null)
     const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth } =
       useResizable()
@@ -154,7 +149,6 @@ export default defineComponent({
       fixedColumnLeftMapRef,
       fixedColumnRightMapRef
     } = useScroll(props, {
-      scrollPartRef,
       bodyWidthRef,
       mainTableInstRef,
       mergedCurrentPageRef
@@ -210,7 +204,6 @@ export default defineComponent({
       mergedExpandedRowKeysRef,
       mergedInderminateRowKeySetRef,
       localeRef,
-      scrollPartRef,
       expandableRef,
       stickyExpandedRowsRef,
       rowKeyRef: toRef(props, 'rowKey'),

diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
@@ -170,7 +170,6 @@ export default defineComponent({
       mergedSortStateRef,
       virtualScrollRef,
       componentId,
-      scrollPartRef,
       mergedTableLayoutRef,
       childTriggerColIndexRef,
       indentRef,
@@ -321,9 +320,6 @@ export default defineComponent({
     function handleMouseleaveTable (): void {
       hoverKeyRef.value = null
     }
-    function handleMouseenterTable (): void {
-      scrollPartRef.value = 'body'
-    }
     function virtualListContainer (): HTMLElement {
       const { value } = virtualListRef
       return value?.listElRef as HTMLElement
@@ -498,7 +494,6 @@ export default defineComponent({
       renderExpandIcon: renderExpandIconRef,
       scrollbarProps: scrollbarPropsRef,
       setHeaderScrollLeft,
-      handleMouseenterTable,
       handleVirtualListScroll,
       handleVirtualListResize,
       handleMouseleaveTable,
@@ -580,7 +575,6 @@ export default defineComponent({
               childTriggerColIndex,
               expandable,
               rowProps,
-              handleMouseenterTable,
               handleMouseleaveTable,
               renderExpand,
               summary,
@@ -935,7 +929,6 @@ export default defineComponent({
                 <table
                   class={`${mergedClsPrefix}-data-table-table`}
                   onMouseleave={handleMouseleaveTable}
-                  onMouseenter={handleMouseenterTable}
                   style={{
                     tableLayout: this.mergedTableLayout
                   }}
@@ -969,7 +962,6 @@ export default defineComponent({
                     clsPrefix: mergedClsPrefix,
                     id: componentId,
                     cols,
-                    onMouseenter: handleMouseenterTable,
                     onMouseleave: handleMouseleaveTable
                   }}
                   showScrollbar={false}

diff --git a/src/data-table/src/TableParts/Header.tsx b/src/data-table/src/TableParts/Header.tsx
@@ -63,7 +63,6 @@ export default defineComponent({
       checkOptionsRef,
       mergedSortStateRef,
       componentId,
-      scrollPartRef,
       mergedTableLayoutRef,
       headerCheckboxDisabledRef,
       onUnstableColumnResize,
@@ -104,13 +103,7 @@ export default defineComponent({
       const nextSorter = createNextSorter(column, activeSorter)
       deriveNextSorter(nextSorter)
     }
-    function handleMouseenter (): void {
-      scrollPartRef.value = 'head'
-    }
-    function handleMouseleave (): void {
-      scrollPartRef.value = 'body'
-    }
-    const resizeStartWidthMap = new Map<ColumnKey, number | undefined>()
+    const resizeStartWidthMap: Map<ColumnKey, number | undefined> = new Map()
     function handleColumnResizeStart (column: TableBaseColumn): void {
       resizeStartWidthMap.set(column.key, getCellActualWidth(column.key))
     }
@@ -153,8 +146,6 @@ export default defineComponent({
       checkOptions: checkOptionsRef,
       mergedTableLayout: mergedTableLayoutRef,
       headerCheckboxDisabled: headerCheckboxDisabledRef,
-      handleMouseenter,
-      handleMouseleave,
       handleCheckboxUpdateChecked,
       handleColHeaderClick,
       handleTableHeaderScroll,
@@ -327,18 +318,11 @@ export default defineComponent({
     if (!discrete) {
       return theadVNode
     }
-    const {
-      handleTableHeaderScroll,
-      handleMouseenter,
-      handleMouseleave,
-      scrollX
-    } = this
+    const { handleTableHeaderScroll, scrollX } = this
     return (
       <div
         class={`${mergedClsPrefix}-data-table-base-table-header`}
         onScroll={handleTableHeaderScroll}
-        onMouseenter={handleMouseenter}
-        onMouseleave={handleMouseleave}
       >
         <table
           ref="body"

diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
@@ -379,7 +379,6 @@ export interface DataTableInjection {
   rawPaginatedDataRef: Ref<InternalRowData[]>
   virtualScrollRef: Ref<boolean>
   bodyWidthRef: Ref<number | null>
-  scrollPartRef: Ref<'head' | 'body'>
   mergedTableLayoutRef: Ref<'auto' | 'fixed'>
   maxHeightRef: Ref<string | number | undefined>
   minHeightRef: Ref<string | number | undefined>

diff --git a/src/data-table/src/use-scroll.ts b/src/data-table/src/use-scroll.ts
@@ -15,16 +15,15 @@ export function useScroll (
   {
     mainTableInstRef,
     mergedCurrentPageRef,
-    bodyWidthRef,
-    scrollPartRef
+    bodyWidthRef
   }: {
-    scrollPartRef: Ref<'head' | 'body'>
     bodyWidthRef: Ref<null | number>
     mainTableInstRef: Ref<MainTableRef | null>
     mergedCurrentPageRef: ComputedRef<number>
   }
 ) {
-  let scrollLeft = 0
+  let lastScrollLeft = 0
+  const scrollPartRef = ref<'head' | 'body' | undefined>()
   const leftActiveFixedColKeyRef = ref<ColumnKey | null>(null)
   const leftActiveFixedChildrenColKeysRef = ref<ColumnKey[]>([])
   const rightActiveFixedColKeyRef = ref<ColumnKey | null>(null)
@@ -91,7 +90,7 @@ export function useScroll (
     let leftActiveFixedColKey: string | number | null = null
     for (let i = 0; i < leftFixedColumns.length; ++i) {
       const key = getColKey(leftFixedColumns[i])
-      if (scrollLeft > (fixedColumnLeftMap[key]?.start || 0) - leftWidth) {
+      if (lastScrollLeft > (fixedColumnLeftMap[key]?.start || 0) - leftWidth) {
         leftActiveFixedColKey = key
         leftWidth = fixedColumnLeftMap[key]?.end || 0
       } else {
@@ -129,7 +128,7 @@ export function useScroll (
       const key = getColKey(rightFixedColumns[i])
       if (
         Math.round(
-          scrollLeft +
+          lastScrollLeft +
             (fixedColumnRightMap[key]?.start || 0) +
             tableWidth -
             rightWidth
@@ -183,14 +182,18 @@ export function useScroll (
     }
   }
   function handleTableHeaderScroll (): void {
-    if (scrollPartRef.value === 'head') {
+    if (scrollPartRef.value !== 'body') {
       beforeNextFrameOnce(syncScrollState)
+    } else {
+      scrollPartRef.value = undefined
     }
   }
   function handleTableBodyScroll (e: Event): void {
     props.onScroll?.(e)
-    if (scrollPartRef.value === 'body') {
+    if (scrollPartRef.value !== 'head') {
       beforeNextFrameOnce(syncScrollState)
+    } else {
+      scrollPartRef.value = undefined
     }
   }
   function syncScrollState (): void {
@@ -201,19 +204,20 @@ export function useScroll (
     if (!body) return
     const { value: tableWidth } = bodyWidthRef
     if (tableWidth === null) return
-    const { value: scrollPart } = scrollPartRef
     if (props.maxHeight || props.flexHeight) {
       if (!header) return
       // we need to deal with overscroll
-      if (scrollPart === 'head') {
-        scrollLeft = header.scrollLeft
-        body.scrollLeft = scrollLeft
+      const directionHead = lastScrollLeft - header.scrollLeft
+      scrollPartRef.value = directionHead !== 0 ? 'head' : 'body'
+      if (scrollPartRef.value === 'head') {
+        lastScrollLeft = header.scrollLeft
+        body.scrollLeft = lastScrollLeft
       } else {
-        scrollLeft = body.scrollLeft
-        header.scrollLeft = scrollLeft
+        lastScrollLeft = body.scrollLeft
+        header.scrollLeft = lastScrollLeft
       }
     } else {
-      scrollLeft = body.scrollLeft
+      lastScrollLeft = body.scrollLeft
     }
     deriveActiveLeftFixedColumn()
     deriveActiveLeftFixedChildrenColumns()