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 <[email protected]> --------- Co-authored-by: afc163 <[email protected]>
react-component · Jun 28, 2024 · 42b19b1 · 42b19b1
1 parent 981cd31
commit 42b19b1
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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');
+      });
     });
   });
 });