From 07d4022e1831905a196be79a794e017203038092 Mon Sep 17 00:00:00 2001
From: Troy Li <a@tianyi.li>
Date: Mon, 26 Oct 2020 22:11:13 +0800
Subject: [PATCH] fix:  Invalid regular expression for particular ellipsis
 content (#27383)

* fix:  Invalid regular expression for particular ellipsis content

* fix: ellipsisContent is possibly nullable

* test: add test cases for ellipsis string with parentheses
---
 components/typography/Base.tsx                |  2 +-
 components/typography/__tests__/index.test.js | 35 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
index 5fafce142a..6dc1732b9d 100644
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@@ -472,7 +472,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
       }
 
       // show rest content as title on symbol
-      restContent = restContent?.replace(new RegExp(`^${ellipsisContent}`), '');
+      restContent = restContent?.slice(String(ellipsisContent || '').length);
 
       // We move full content to outer element to avoid repeat read the content by accessibility
       textNode = (
diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js
index a5ce718f00..8f69e59220 100644
--- a/components/typography/__tests__/index.test.js
+++ b/components/typography/__tests__/index.test.js
@@ -104,6 +104,41 @@ describe('Typography', () => {
         wrapper.unmount();
       });
 
+      it('string with parentheses', async () => {
+        const parenthesesStr = `Ant Design, a design language (for background applications, is refined by
+          Ant UED Team. Ant Design, a design language for background applications,
+          is refined by Ant UED Team. Ant Design, a design language for background
+          applications, is refined by Ant UED Team. Ant Design, a design language
+          for background applications, is refined by Ant UED Team. Ant Design, a
+          design language for background applications, is refined by Ant UED Team.
+          Ant Design, a design language for background applications, is refined by
+          Ant UED Team.`;
+        const onEllipsis = jest.fn();
+        const wrapper = mount(
+          <Base ellipsis={{ onEllipsis }} component="p" editable>
+            {parenthesesStr}
+          </Base>,
+        );
+
+        await sleep(20);
+        wrapper.update();
+        expect(wrapper.text()).toEqual('Ant Design, a des...');
+        const ellipsisSpan = wrapper.find('span[title]');
+        expect(ellipsisSpan.text()).toEqual('...');
+        expect(ellipsisSpan.props().title)
+          .toEqual(`ign language (for background applications, is refined by
+          Ant UED Team. Ant Design, a design language for background applications,
+          is refined by Ant UED Team. Ant Design, a design language for background
+          applications, is refined by Ant UED Team. Ant Design, a design language
+          for background applications, is refined by Ant UED Team. Ant Design, a
+          design language for background applications, is refined by Ant UED Team.
+          Ant Design, a design language for background applications, is refined by
+          Ant UED Team.`);
+        onEllipsis.mockReset();
+
+        wrapper.unmount();
+      });
+
       it('should middle ellipsis', async () => {
         const suffix = '--suffix';
         const wrapper = mount(