From 11f27925cbd077f1f069035b5f20af59c525ec60 Mon Sep 17 00:00:00 2001
From: "zhangyumei.0319" <zhangyumei.0319@bytedance.com>
Date: Fri, 12 Apr 2024 17:01:56 +0800
Subject: [PATCH] fix: Fix the omission exception when children in Typography
 is a template string

---
 .../typography/__test__/typography.test.js      | 17 +++++++++++++++++
 packages/semi-ui/typography/base.tsx            |  9 ++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/semi-ui/typography/__test__/typography.test.js b/packages/semi-ui/typography/__test__/typography.test.js
index 20cb52a73f..ab288b809d 100644
--- a/packages/semi-ui/typography/__test__/typography.test.js
+++ b/packages/semi-ui/typography/__test__/typography.test.js
@@ -107,4 +107,21 @@ describe(`Typography`, () => {
         })
         expect(numeral.find('.price').text()).toEqual('1992.15')
     })
+
+    it('children is template string', () => {
+        const { Text } = Typography;
+        const code = 'code'; 
+
+        const typographyParagraph = mount(
+            <Text 
+                style={{  marginTop: 6, color: 'var(--semi-color-text-2)' }}
+                ellipsis={{ showTooltip: { opts: { style: { wordBreak: 'break-word' } } } }}
+                copyable={{ content: code }}
+            >
+                Key: {code}
+            </Text>
+        );
+        expect(typographyParagraph.find('.semi-typography').children().at(0).text()).toEqual('Key: code');
+    });
+
 });
diff --git a/packages/semi-ui/typography/base.tsx b/packages/semi-ui/typography/base.tsx
index 908d82b635..3698acf857 100644
--- a/packages/semi-ui/typography/base.tsx
+++ b/packages/semi-ui/typography/base.tsx
@@ -391,11 +391,14 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
 
         const extraNode = { expand: this.expandRef.current, copy: this.copyRef && this.copyRef.current };
 
+        // Perform type conversion on children to prevent component crash due to non-string type of children
+        // https://github.com/DouyinFE/semi-design/issues/2167
+        const realChildren = Array.isArray(children) ? children.join('') : String(children);
+
         const content = getRenderText(
             this.wrapperRef.current,
             rows,
-            // Perform type conversion on children to prevent component crash due to non-string type of children
-            String(children),
+            realChildren,
             extraNode,
             ELLIPSIS_STR,
             suffix,
@@ -405,7 +408,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
             this.setState({
                 isOverflowed: false,
                 ellipsisContent: content,
-                isTruncated: children !== content,
+                isTruncated: realChildren !== content,
             }, resolve);
         });