kingdee / kdesign

An enterprise-class React UI components library
https://react.kingdee.design/
Apache License 2.0
107 stars 45 forks source link

[tree] 多选设置scrollToKey时会导致选中节点后会滚动到scrollToKey对应的树节点 #906

Closed kobehhh closed 1 month ago

kobehhh commented 1 month ago

重现链接或代码

import React from 'react'
import ReactDOM from 'react-dom'
import { Tree } from '@kdcloudjs/kdesign'
import type { TreeNodeData } from '@kdcloudjs/kdesign'

const Demo: React.FC = () => {
  const [expandedKeys, setExpandedKeys] = React.useState(['0-1', '0', '1'])
  const [checkedKeys, setCheckedKeys] = React.useState([])
  const [selectedKeys, setSelectedKeys] = React.useState([])
  const [scrollToKey, setKey] = React.useState(undefined)
  const data: TreeNodeData[] = [
    {
      key: '0',
      title: '0',
      children: [
        {
          key: '0-0',
          title: '0-0',
          children: [],
        },
        {
          key: '0-1',
          title: '0-1',
          children: [],
        },
      ],
    },
    {
      key: '1',
      title: '1',
      children: [
        {
          key: '1-0',
          title: '1-0',
          children: [],
        },
        {
          key: '1-1',
          title: '1-1',
          children: [
            {
              key: '1-1-0',
              title: '1-1-0',
              children: [
                {
                  key: '1-1-0-0',
                  title: '1-1-0-0',
                  children: [],
                },
              ],
            },
            {
              key: '1-1-1',
              title: '1-1-1',
              children: [
                {
                  key: '1-1-1-0',
                  title: '1-1-1-0',
                  children: [],
                },
              ],
            },
          ],
        },
        {
          key: '1-2',
          title: '1-2',
          children: [],
        },
      ],
    },
    {
      key: '2',
      title: '2',
      children: [],
    },
    {
      key: '3',
      title: '3',
      children: [],
    },
  ]
  const onSelect = (selectedKeys, info) => {
    setSelectedKeys(selectedKeys)
    console.log('onSelect', selectedKeys)
  }

  const onCheck = (checkedKeys, info) => {
    console.log('checkedKeys', checkedKeys)
    setCheckedKeys(checkedKeys)
    setKey(checkedKeys[0])
  }

  const onExpand = (expandedKeys, info) => {
    console.log('onExpand', expandedKeys)
    setExpandedKeys(expandedKeys)
  }

  return (
    <div style={{ width: '300px', height: '100px' }}>
      <Tree
        treeData={data}
        expandedKeys={expandedKeys}
        checkedKeys={checkedKeys}
        selectedKeys={selectedKeys}
        onCheck={onCheck}
        onExpand={onExpand}
        onSelect={onSelect}
        virtual={false}
        checkable={true}
        scrollToKey={scrollToKey}
      />
    </div>
  )
}

ReactDOM.render(<Demo />, mountNode)

重现问题步骤

选中顶部的树节点后 滚动到底部选中一个节点 这个时候会定位到顶部去

期望的结果是什么

不会滚动

实际的结果是什么

组件库版本号、浏览器信息

组件库与浏览器均为最新版本