From 42b19b173250b848d59bb46be2de999acd79643c Mon Sep 17 00:00:00 2001
From: huangkairan <56213366+huangkairan@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:35:07 +0800
Subject: [PATCH] fix: render correct label with `fieldNames`(#49631) (#538)

* fix:  render correct label with `fieldNames`(#49631)

* fix: update

* Update src/TreeSelect.tsx

Co-authored-by: afc163 <afc163@gmail.com>

---------

Co-authored-by: afc163 <afc163@gmail.com>
---
 examples/fieldNames.tsx    | 78 ++++++++++++++++++++++++++------------
 src/TreeSelect.tsx         |  3 +-
 tests/Select.props.spec.js | 33 ++++++++++++++++
 3 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/examples/fieldNames.tsx b/examples/fieldNames.tsx
index be636993..6b20325e 100644
--- a/examples/fieldNames.tsx
+++ b/examples/fieldNames.tsx
@@ -5,29 +5,59 @@ import TreeSelect from '../src';
 
 export default () => {
   return (
-    <TreeSelect
-      treeDefaultExpandAll
-      treeData={[
-        {
-          myLabel: 'Parent',
-          myValue: 'parent',
-          myChildren: [
-            {
-              myLabel: 'Sub 1',
-              myValue: 'sub_1',
-            },
-            {
-              myLabel: 'Sub 2',
-              myValue: 'sub_2',
-            },
-          ],
-        },
-      ]}
-      fieldNames={{
-        label: 'myLabel',
-        value: 'myValue',
-        children: 'myChildren',
-      }}
-    />
+    <div>
+      <h2>basic</h2>
+      <TreeSelect
+        treeDefaultExpandAll
+        treeData={[
+          {
+            myLabel: 'Parent',
+            myValue: 'parent',
+            myChildren: [
+              {
+                myLabel: 'Sub 1',
+                myValue: 'sub_1',
+              },
+              {
+                myLabel: 'Sub 2',
+                myValue: 'sub_2',
+              },
+            ],
+          },
+        ]}
+        fieldNames={{
+          label: 'myLabel',
+          value: 'myValue',
+          children: 'myChildren',
+        }}
+      />
+
+      <h2>title render</h2>
+      <TreeSelect
+        treeDefaultExpandAll
+        treeTitleRender={node => <span>{node.myLabel}</span>}
+        treeData={[
+          {
+            myLabel: 'Parent',
+            myValue: 'parent',
+            myChildren: [
+              {
+                myLabel: 'Sub 1',
+                myValue: 'sub_1',
+              },
+              {
+                myLabel: 'Sub 2',
+                myValue: 'sub_2',
+              },
+            ],
+          },
+        ]}
+        fieldNames={{
+          label: 'myLabel',
+          value: 'myValue',
+          children: 'myChildren',
+        }}
+      />
+    </div>
   );
 };
diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx
index c949f120..b71102b8 100644
--- a/src/TreeSelect.tsx
+++ b/src/TreeSelect.tsx
@@ -368,7 +368,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
 
         // Fill missing label & status
         if (entity) {
-          rawLabel = rawLabel ?? getLabel(entity.node);
+          rawLabel = treeTitleRender ? treeTitleRender(entity.node) : rawLabel ?? getLabel(entity.node);
           rawDisabled = entity.node.disabled;
         } else if (rawLabel === undefined) {
           // We try to find in current `labelInValue` value
@@ -377,7 +377,6 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
           );
           rawLabel = labelInValueItem.label;
         }
-
         return {
           label: rawLabel,
           value: rawValue,
diff --git a/tests/Select.props.spec.js b/tests/Select.props.spec.js
index d9b40225..30e16972 100644
--- a/tests/Select.props.spec.js
+++ b/tests/Select.props.spec.js
@@ -660,6 +660,39 @@ describe('TreeSelect.props', () => {
         );
         expect(wrapper.getSelection(0).text()).toBe('Value 0-0');
       });
+
+      it('with fieldNames', () => {
+        const wrapper = mount(
+          <div>
+            <TreeSelect
+              defaultValue={'parent'}
+              treeTitleRender={node => node.myLabel}
+              fieldNames={{
+                label: 'myLabel',
+                value: 'myValue',
+                children: 'myChildren',
+              }}
+              treeData={[
+                {
+                  myLabel: 'Parent',
+                  myValue: 'parent',
+                  myChildren: [
+                    {
+                      myLabel: 'Sub 1',
+                      myValue: 'sub_1',
+                    },
+                    {
+                      myLabel: 'Sub 2',
+                      myValue: 'sub_2',
+                    },
+                  ],
+                },
+              ]}
+            />
+          </div>,
+        );
+        expect(wrapper.getSelection(0).text()).toBe('Parent');
+      });
     });
   });
 });