fix(Tree): should keep click and key events consistent,close alibaba-…

…fusion#2899
FairyYang · Jul 3, 2024 · 906bc90 · 906bc90
1 parent ab017bc
commit 906bc90
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/components/tree/__tests__/index-spec.tsx b/components/tree/__tests__/index-spec.tsx
@@ -721,6 +721,34 @@ describe('Tree', () => {
         shouldSelected('4', false);
     });
 
+    it('should keep click and key events consistent', () => {
+        const node: NodeInstance[] = [];
+        const handleSelect = (
+            selectedKeys: Key[],
+            extra: {
+                selectedNodes: Array<NodeInstance>;
+                node: NodeInstance;
+                selected: boolean;
+                event: React.KeyboardEvent;
+            }
+        ) => {
+            node.push(extra.node);
+        };
+        cy.mount(<Tree defaultExpandAll dataSource={dataSource} onSelect={handleSelect} />);
+        selectTreeNode('1');
+        shouldSelected('1', true);
+        selectTreeNode('1');
+        shouldSelected('1', false);
+        findTreeNodeByKey('1').find('.next-tree-node-label').first().trigger('keydown', {
+            keyCode: KEYCODE.ENTER,
+        });
+        shouldSelected('1', true);
+        cy.then(() => {
+            expect(node.length).equal(3);
+            expect(node[0]).to.deep.equal(node[2]);
+        });
+    });
+
     it('should support defaultCheckedKeys and onCheck', () => {
         const onClick = cy.spy();
         const handleCheck = (

diff --git a/components/tree/view/tree.tsx b/components/tree/view/tree.tsx
@@ -614,7 +614,7 @@ export class Tree extends Component<TreeProps, TreeState> {
 
         let focusedKey = this.state.focusedKey;
 
-        const node = this.state._k2n[key];
+        const node = item;
         const pos = this.state._k2n[key].pos;
         const level = pos!.split('-').length - 1;
         switch (e.keyCode) {
@@ -696,20 +696,18 @@ export class Tree extends Component<TreeProps, TreeState> {
         this.props.onBlur && this.props.onBlur(e);
     }
 
-    handleExpand(expand: boolean, key: string, node: NodeInstance | DataNode) {
+    handleExpand(expand: boolean, key: string, node: NodeInstance) {
         const { onExpand, loadData } = this.props;
         const expandedKeys = this.state.expandedKeys; // 由于setState 是异步操作，所以去掉 [...this.state.expandedKeys]
         this.processKey(expandedKeys, key, expand);
         const setExpandedState = () => {
             if (!('expandedKeys' in this.props)) {
                 this.setState({ expandedKeys });
             }
-            // @ts-expect-error must be NodeInstance type, but it's maybe DataNode type.
-            onExpand(expandedKeys, { expanded: expand, node });
+            onExpand!(expandedKeys, { expanded: expand, node });
         };
 
         if (expand && loadData) {
-            // @ts-expect-error must be NodeInstance type, but it's maybe DataNode type.
             return loadData(node).then(setExpandedState);
         } else {
             setExpandedState();
@@ -719,7 +717,7 @@ export class Tree extends Component<TreeProps, TreeState> {
     handleSelect(
         select: boolean,
         key: string,
-        node: NodeInstance | DataNode,
+        node: NodeInstance,
         e: React.KeyboardEvent | React.MouseEvent
     ) {
         const { multiple, onSelect } = this.props;
@@ -736,15 +734,14 @@ export class Tree extends Component<TreeProps, TreeState> {
         onSelect!(selectedKeys, {
             // @ts-expect-error must be NodeInstance type, but it's maybe be DataNode type.
             selectedNodes: this.getNodes(selectedKeys),
-            // @ts-expect-error must be NodeInstance type, but it's maybe be DataNode type.
             node,
             selected: select,
             event: e,
         });
     }
 
     // eslint-disable-next-line max-statements
-    handleCheck(check: boolean, key: string, node: NodeInstance | DataNode) {
+    handleCheck(check: boolean, key: string, node: NodeInstance) {
         const { checkStrictly, checkedStrategy, onCheck } = this.props;
         const { _k2n, _p2n } = this.state;
         const checkedKeys = [...this.state.checkedKeys];
@@ -868,7 +865,6 @@ export class Tree extends Component<TreeProps, TreeState> {
                     return { node, pos };
                 })
                 .filter(v => !!v),
-            // @ts-expect-error must be NodeInstance type, but it's maybe be DataNode type.
             node,
             indeterminateKeys,
             checked: check,